CODEWITHSUNDEEP
javascriptjquery
user3792525
user3792525

Reputation: 31

Jquery element lost draggable effect after transferring divs

Im new with Jquery UI Draggable. heres my problem, I have 2 Divs which items may be transfered between two divs. Why does the draggable effect lost when a div transferred to other div then returned? I cannot use helper clone. element must be draggable at all time.

Here is to replicate the issue on jsfiddle https://jsfiddle.net/w7vjuuqx/7/:

  1. drag and drop the blue box from red box to green box.
  2. drag and drop the blue box from green box to red box.
  3. repeat step 1. here the drag effect lost.

JS:

$('.item').draggable();

$( '#placeholder' ).droppable({
    accept: '.item',
    drop: function( event, ui ) {
      var droppable = $(this);
      var draggable = ui.draggable;
      $(draggable).attr('class', 'new_item_inside');
      draggable.appendTo(droppable);
      draggable.css({position: 'absolute', top: '0px', left: '0px'});
      alert('hello');
    }
});

$( '#item_holder' ).droppable({
  accept: '.new_item_inside',
  drop: function( event, ui ) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // var html = $(ui.draggable).clone(true);
     ui.draggable.draggable('enable');
    $(draggable).attr('class', 'item');
    draggable.appendTo('#item_holder');
    draggable.css({position: 'static', float: 'left'});

  }
});

HTML:

<div id="item_holder" style="width:100px;height:100px;background-color:red">
   <div class="item" style="width:20px;height:20px;background-color:blue">
       test
   </div>
</div>
<div id="placeholder" style="width:100px;height:100px;background-color:green;border-style: solid;display: inline-block;position:relative">

</div>

Upvotes: 1

Views: 915

Answers (2)

DROP DATABASE
DROP DATABASE

Reputation: 46

This use case is easily solvable with the use of the sortable api. You connect two elements with connectWith then use the different events (such as receive -the rest of them are here http://api.jqueryui.com/sortable/) to manipulate further:

JS:

$('.itemContainer').sortable({
    connectWith: $('.itemContainer'),
  receive: function(event, ui) {
    console.log(ui.item[0].innerHTML);
  }
});

HTML:

<ul id="leftHolder" class="itemContainer">
  <li class="draggableItem">1</li>
  <li class="draggableItem">2</li>
  <li class="draggableItem">3</li>
</ul>

<ul id="rightHolder" class="itemContainer">
</ul>

FIDDLE: https://jsfiddle.net/gy2y5dj2/

Upvotes: 0

Kylie
Kylie

Reputation: 11749

If you add the below code on your .item draggable, you should see visually the dragging action. However, you'll notice, the original now stays in place, and the clone is the draggable. But I think the user will know what to do with this. It won't be confusing.

$('.item').draggable({
 revert: "invalid",
 helper: "clone",
 cursor : "move",
});

Fiddle

Upvotes: 0

Related Questions