CODEWITHSUNDEEP
javascriptjquerysortingjquery-uidrag-and-drop
Lonergan6275
Lonergan6275

Reputation: 2028

JQuery ui Drag drop and sort. duplicating dropped item when sorting

I am trying to implement drag drop and sort using jquery-ui. the drad and drop works but i would also like to be able to drop in between two previously dropped items. But the main problem i am having is when i try to sort it is cloning the dropped item again. How to i prevent this behaviour.

HTML

<div id="drop-area" class="ui-sortable">

  <!-- <p id="drop-placeholder-text">Drop Advert Here To Begin</p> -->
</div>
<br>


<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/100x100' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/200x200' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/300x300' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>
<div class='tile'>
  <div>
    <img class='grid-image ui-draggable' src='https://placehold.it/400x400' alt=''>
    <p>title</p>
  </div>
  <br>
  <a href='#'>Publish</a>
  <a href='#'>Playlist</a>
</div>

JS

$(document).ready(function() {
  $("#drop-area").droppable({
    drop: function(event, ui) {

            var spacer = "<div class='spacer'></div>";
      var clone = $(ui.draggable).clone();
      clone.addClass('.connectedSortable')
      clone.removeClass('.ui-draggable');

      $(this).append(clone);
      $(this).append(spacer);

    }
  });
  $(".ui-draggable").draggable({
    opacity: 1.0,
    helper: 'clone',
    revert: 'invalid'
  });

  $("#drop-area").sortable({
    axis: "x"
  });
  $("#drop-area").disableSelection();

});

jsFiddle

Upvotes: 0

Views: 425

Answers (2)

Lonergan6275
Lonergan6275

Reputation: 2028

I got it to work by removing the $("#drop-area").droppable({}); call

$(document).ready(function() {

    $( ".ui-draggable" ).draggable({
        opacity: 1.0,
        helper: 'clone',
        revert: 'invalid',
        connectToSortable: '#drop-area'
    });

    $("#drop-area").sortable({
        axis:"x",
        connectWith: '.connectedSortable'
    });
    $("#drop-area").disableSelection();
});

Upvotes: 0

Stavros Angelis
Stavros Angelis

Reputation: 962

I made a quick edit on your code as seen below. Basically when you drop the block I added a class dropped and then check if the class exists before appending a new clone. I checked it on your fiddle and it seems to work ok.

 if (clone.hasClass('dropped')) {
    return false;
  }
  clone.addClass('.connectedSortable').addClass('dropped');

Upvotes: 1

Related Questions