Jquery UI Drag N拖放重复问题

Question

Here is the link to my page.我遇到了jQuery UI拖放n拖放功能的问题。我需要它能够将多个相同的物品拖放到旁边的容器中，并且我可以将它们重新排序。

到目前为止，它允许我拖放3，因为我在代码中设置了，但问题是当我拖入其他任何东西到框中，并尝试重新排列列表，我试图拖动重复的当前列表项本身，直到有3个，才允许我重新排序。除非我从左边的容器中拖出，否则有任何防止重复的帮助？

这里是我的HTML：

<div id="products" class="column large-4 row"> 
    <h1 class="ui-widget-header">Drag hiring steps to the box on the right.</h1> 
    <div class="ui-widget-content"> 
     <ul> 
      <li data-id="1"><span>Phone Interview</span></li> 
      <li data-id="2"><span>In-Person Interview</span></li> 
      <li data-id="3"><span>Technical Test</span></li> 
      <li data-id="4"><span>Personality Test</span></li> 
      <li data-id="5"><span>Background Check</span></li> 
      <li data-id="6"><span>Drug Test</span></li> 
      <li data-id="7"><span contenteditable>Custom Addition</span></li> 
     </ul> 
    </div> 
</div> 
<div id="shoppingCart1" class="shoppingCart column large-6 push-1"> 
    <h1 class="ui-widget-header">Drag &amp; drop steps to reorder the hiring process.</h1> 
    <div class="ui-widget-content"> 
     <ol> 

     </ol> 
    </div> 
</div> 

这里是我的JS：

var $start_counter = $("#event-start"), 
$drag_counter = $("#event-drag"), 
$stop_counter = $("#event-stop"), 
counts = [ 0, 0, 0 ]; 
$("#products li").draggable({ 
    appendTo: "body", 
    helper: "clone", 
    cursor: "url(grab.cur), url(img/hand.png), auto", 
    start: function() { 
     var dd = $(this).text(); 
     console.log(dd + ' is dragging'); 
    } 
}); 

$(".shoppingCart ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) { 
     var self = $(this); 
     self.find(".placeholder").remove(); 
     var productid = ui.draggable.attr("data-id"); 
     if (self.find("[data-id=" + productid + "]").length == 3) return; 

     $("<li></li>", { 
      "text": ui.draggable.text(), 
      "data-id": productid, 
      "class": 'editable' 
     }).appendTo(this); 

     $("<span></span>", { 
      "class": 'close pull-2' 
     }).appendTo('.editable'); 

     $('.ui-droppable li').wrapInner('<span class="white"> </span>'); 

     // To remove item from other shopping chart do this 
     var cartid = self.closest('.shoppingCart').attr('id'); 
     $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove(); 
    var removeMom = function(el) { 
     el.on('click', function() { 
      var closeBtn = $(this).parents('.editable'); 
      closeBtn.slideUp(200, function() { $(this).remove();}); 
     }) 

    } 

    $('.ui-draggable, .editable').each(
     function() { 
      handTrick($(this)); 
     } 
    ); 

    $('.close').each(
     function() { 
      removeMom($(this)); 
     } 
    ); 
} 
}).sortable({ 
items: "li:not(.placeholder)", 
sort: function() { 
    $(this).removeClass("ui-state-default"); 
} 
}); 

var removeMom = function(el) { 
el.on('click', function() { 
    var closeBtn = $(this).parents('.editable'); 
    closeBtn.remove(); 
}) 

} 

var handTrick = function(el) { 
el.on('mouseover', function() { 
    $(this).css({cursor: "pointer"}); 
}); 
el.on('mouseoout', function() { 
    $(this).css({cursor: "auto"}); 
}); 
el.on('mousedown', function() { 
    $(this).css({cursor: "url(grab.cur), url(img/hand.png), auto"}); 
}); 
el.on('mouseup', function() { 
    $(this).css({cursor: "pointer"}); 
}); 

} 

$('.close').each(
function() { 
    removeMom($(this)); 
} 
); 

$('.ui-draggable').each(
function() { 
    handTrick($(this)); 
} 
); 

var yy = $('.ui-widget-content').height(); 
$('.ui-droppable').css('min-height', yy); 

CSS，你可以看到自己，当你去到该页面。我希望有人能帮帮忙！

Answer 1

找到了解决办法。我不得不在有条件的环境中包装这个drop。它仍然允许我在没有每个物品能够在容器内拖拽时自己复制的情况下进入容器。

if(!ui.draggable.hasClass('editable')){ 
     var self = $(this); 
     var productid = ui.draggable.attr("data-id"); 
     if (self.find("[data-id=" + productid + "]").length == 9) return; 

     $("<li></li>", { 
      "text": ui.draggable.text(), 
      "data-id": productid, 
      "class": 'editable', 
     }).appendTo(this); 
     $("<span></span>", { 
      "class": 'close pull-2' 
     }).appendTo('.editable'); 
     $('.ui-droppable li').wrapInner('<span class="white"> </span>'); 

     var cartid = self.closest('.shoppingCart').attr('id'); 
     $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove(); 



     var removeMom = function(el) { 
      el.on('click', function() { 
       var closeBtn = $(this).parents('.editable'); 
       closeBtn.slideUp(200, function() { $(this).remove();}); 
      }) 

     } 

     $('.ui-draggable, .editable').each(
      function() { 
       handTrick($(this)); 
      } 
     ); 

     $('.close').each(
      function() { 
       removeMom($(this)); 
      } 
     ); 
}