I'm using the jQuery UI Droppable plugin. This code activates the droppable:

$(".droppable").droppable({
        drop: function(event, ui) {
                 moveToTerm(ui.draggable, $(this));
               }
});

function moveToTerm(item, term) {
    item.fadeOut(function() {
        item.appendTo(term).fadeIn();
    });
}

The idea is to have the dropped item fade out, become a descendant of the target in the DOM, then fade back in. This seems to work. Here is the HTML of a droppable that has multiple draggable elements on it:

<ul id="droppable-terms">
       <li class="droppable term ui-droppable">Fall 2010
                   <li class="draggable ui-draggable" style="position: relative; left: -9px; top: 162px; display: list-item;">New Media and Society</li>
                   <li class="draggable ui-draggable" style="position: relative; left: 32px; top: 180px; display: list-item;">Computing Cultures</li>
                   <li class="draggable ui-draggable" style="position: relative; left: -15px; top: 177px; display: list-item;">Introduction to Web Design</li>
                   <li class="draggable ui-draggable" style="position: relative; left: 51px; top: 230px; display: list-item;">Networks</li>
                   <li class="draggable ui-draggable" style="position: relative; left: -16px; top: 405px; display: list-item;">Intermediate Web Programming</li>
        </li>
 </ul>

Everything looks really odd. Instead of being placed nicely in the list, there is great variation in their (x, y) positions.

Here are CSS rules that affect the droppables:

.term {
    width: 215px;
    height: 215px;
    background-color: #DADAFF;
    padding: 10px;
    margin: 10px;
    float: left;
}

#droppable-terms {
    list-style-type: none;
}

What am I doing wrong here?

2 answers

0
points

probably floating them. can you try it without floats?

Answered over 6 years ago by Tony Crockford
Mottie 1134
0
points

I believe your problem might be that you aren't floating both the droppable and draggable sections. You'll also need to add both draggable and droppable functions for it to work properly. I've set up a demo so you can see what this code does.

CSS

.term {
 width: 215px;
 height: 215px;
 background-color: #ddd;
 padding: 10px;
 margin: 10px;
 float: left;
}

#droppable-area, #draggable-terms {
 list-style-type: none;
 float: left;
}

.fade50 {
 filter:alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

.fade10 {
 filter:alpha(opacity=10);
 -moz-opacity: 0.1;
 -khtml-opacity: 0.1;
 opacity: 0.1;
}

HTML

<h3>Fall 2010</h3>
<ul id="droppable-area" class="term">
</ul>

<ul id="draggable-terms">
 <li>New Media and Society</li>
 <li>Computing Cultures</li>
 <li>Introduction to Web Design</li>
 <li>Networks</li>
 <li>Intermediate Web Programming</li>
</ul>

Script

$(document).ready(function(){

 $("#draggable-terms li").draggable({
  helper : 'clone',
  revert : true,
  start: function(e,ui){
   $(this).addClass('fade50');
  },
  stop: function(e,ui){
   $(this).removeClass('fade50');
  }
 });

 $("#droppable-area").droppable({
  drop: function(e, ui) {
   ui.draggable
    .addClass('fade10')
    .appendTo($(this))
    .animate(
     { opacity: 1 },
     2500,  // time in milliseconds
     function(){ $(this).removeClass('fade10') }
    );
   ui.helper.remove();
  }
 });

})
Answered over 6 years ago by Mottie