Read some similar articals / questions but cannot make this working up if the droppables are many elements with the same named class.

how to make the dragged element only be dropped in a droppable element. if its dragged else where, it goes back the the original parent. (would not be dragged).

JSFiddle Sample

HTML

<div  class="box-body">
    <div class="task">task</div>
</div>
<div class="box-body"></div>

JS

$('.task').draggable();
    $('.box-body').droppable({
        drop:function(e, ui) {
            $(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
    }
});

CSS

.box-body {
    height:100px;
    width:100px;
    border:1px solid #333;
}
.task {
    width:100%;
    margin:5px;
    border:1px solid #333;
}

Read some similar articals / questions but cannot make this working up if the droppables are many elements with the same named class.

how to make the dragged element only be dropped in a droppable element. if its dragged else where, it goes back the the original parent. (would not be dragged).

JSFiddle Sample

HTML

<div  class="box-body">
    <div class="task">task</div>
</div>
<div class="box-body"></div>

JS

$('.task').draggable();
    $('.box-body').droppable({
        drop:function(e, ui) {
            $(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
    }
});

CSS

.box-body {
    height:100px;
    width:100px;
    border:1px solid #333;
}
.task {
    width:100%;
    margin:5px;
    border:1px solid #333;
}

• javascript
• jquery
• jquery-ui

1 Answer 1

Sample

It is shown here how to revert the position of droppables
http://jqueryui./droppable/#revert

You can do this by initialising you draggables like this: $( "#draggable" ).draggable({ revert: "invalid" });

JS

  $(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });

HTML

<div id="draggable" class="ui-widget-content">
  <p>I revert when I'm dropped</p>
</div>

<div id="draggable2" class="ui-widget-content">
  <p>I revert when I'm not dropped</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop me here</p>
</div>

CSS

#draggable, #draggable2 {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
}