jQuery ui droppable not firing

Question

I'm trying to build a drag-drop system where images can be dragged into a particular div. Because the images are in a scroller, I have to use clone for the draggables. The problem I have is that the 'drop' event doesn't seem to be fired when I drag the image onto the div. I've searched online, but haven't found a solution which works.

I have the following:

$( "#droppable" ).droppable({
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    alert('ok');
  }
});

$( ".draggable" ).draggable({ 
  helper: "clone", 
  scroll: false
});

so that when the .draggable element is dropped on the #droppable div, I should see an alert. The droppable does get the activeClass, so it's getting that far, but when I drop the image, nothing happens - it just disappears.

The html is:

For the droppable (it's in a scrollable div, using the jQuery ui scrollable):

<div class="scrollable" id="scrollable">
  <div id="scrollable-items" class="items">
    <div id="scrollerDiv_1">
      <div>
        <div id="droppable" class="droppable ui-droppable">
          <div class="ImageArea"></div>
          <div class="CaptionArea">Drag a photo or video into the box above to create a new frame</div>
        </div>
      </div>
    </div>
  </div>
</div>

For the draggable images:

<div id="EditMain">
  <div id="libraryMain">
    <div id="my-asset-list" class="assetList">
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
    </div>
  </div>
</div>

@Sharon, seems ok: http://jsfiddle.net/baQL9/ Did you place the js codes in a document ready block, e.g. `$(function(){ ... });`? — Halil Özgür, Sep 13 '12 at 13:14
Thanks. The html is generated on the fly, and the jquery is applied after they're created. That's partly why I added the "activeClass: "ui-state-highlight"" part, so that I can see that the jquery is being fired. It does seem to be hitting that, as the class is added ok. It just doesn't seem to fire the 'drop' part. — Sharon, Sep 13 '12 at 13:18

score 2 · Answer 1 · edited Mar 31 '19 at 11:48

2

Got it working - thanks for the help.

Once I realised it was working for others, I figured it had to be a clash with something else - and sure enough, there was another 'droppable' script, which I'd put in ages ago and forgotten about. Removed that, and all works fine.

edited Mar 31 '19 at 11:48

halfer

19,824
17
99
186

answered Sep 13 '12 at 13:29

Sharon

3,471
13
60
93

score 1 · Accepted Answer · answered Sep 13 '12 at 13:10

1

in the drop function, you need to append the dropped item into the container:

drop: function(event, ui) {
    $('#mycontainer').append(ui.draggable);
    return true;
}

The return value indicates whether the drop was successful or not.

answered Sep 13 '12 at 13:10

Steven Hunt

2,321
19
18

Thanks. I tried that, but it doesn't make any difference. It's as if it's not even trying to fire the 'drop' part. – Sharon Sep 13 '12 at 13:14
It must be another part of the page interfering.... I'll take a look and see if there's anything else going on that would stop it from working. Thanks. – Sharon Sep 13 '12 at 13:22

score 1 · Answer 3 · answered Sep 13 '12 at 13:11

1

for me it is working properly.. do one thing,temporary give background color to your droppable div. so that you can know the area in which you can drop the image.because you can drop the image only in area which you have defined as droppable

answered Sep 13 '12 at 13:11

Priya

1,375
8
21
45

It already has a background color. I can see when I'm over it, because the class "ui-state-highlight" gets appended. So I don't think that's the problem. But thanks for answering. – Sharon Sep 13 '12 at 13:13

score 1 · Answer 4 · answered Sep 13 '12 at 13:21

1

This will work for you:

$("#droppable").droppable({
            activeClass: "ui-state-highlight",
            drop: function (event, ui) {
                alert('ok');
                x = $(ui.helper).clone();
                x.appendTo($(this));

            }
        });

answered Sep 13 '12 at 13:21

Priya

1,375
8
21
45

1

Thanks, but still nothing! I'm going to take a look and see whether something else could be interfering. – Sharon Sep 13 '12 at 13:23

score 0 · Answer 5 · answered Sep 10 '14 at 16:28

Had a similar problem that was related to containment solution, or specifically the relationship of the draggables to the droppables. Originally tried this with no success;

drag.getSymbolElement().draggable( {
       containment: 'parent',
       ...

Changing the containment to html fixed the issue;

drag.getSymbolElement().draggable( {
       containment: 'html',
       ...

NOTE: the solution was for Adobe Edge if that's an additional factor.

jQuery ui droppable not firing

5 Answers5