jquery draggable droppable हटा

Question

शॉपिंग कार्ट से आइटम को कैसे हटाया जाएगा?

स्वाभाविक रूप से आप आइटम को वापस खींच और छोड़ने में सक्षम होना चाहते हैं।

$(function() { 
     $("#catalog").accordion(); 
     $("#catalog li").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#cart ol").droppable({ 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function(event, ui) { 
       $(this).find(".placeholder").remove(); 
       $("
").text(ui.draggable.text()).appendTo(this); 
      } 
     }).sortable({ 
      items: "li:not(.placeholder)", 
      sort: function() { 
       // gets added unintentionally by droppable interacting with sortable 
       // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options 
       $(this).removeClass("ui-state-default"); 
      } 
     }); 
    }); 

Answer 1

यह काम करना चाहिए:

$(function() { 
    $("#catalog").accordion(); 
    $("#catalog li").draggable({ 
     appendTo: "body", 
     helper: "clone" 
    }); 
    $("#cart ol").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
      $(this).find(".placeholder").remove(); 
      $("<li></li>").text(ui.draggable.text()) 
       .addClass("cart-item") 
       .appendTo(this); 
     } 
    }).sortable({ 
     items: "li:not(.placeholder)", 
     sort: function() { 
      $(this).removeClass("ui-state-default"); 
     } 
    }); 
    $("#catalog ul").droppable({ 
     drop: function(event, ui) { 
      $(ui.draggable).remove(); 
     }, 
     hoverClass: "ui-state-hover", 
     accept: '.cart-item' 
    }); 
}); 

नोट्स:

• जब एक आइटम गाड़ी क्षेत्र पर गिरा दिया जाता है, मैं नए आइटम को cart-item के एक वर्ग जोड़ दिया है ।
• मैंने कैटलॉग के ul ड्रॉपपेबल बनाया है; यह क्षेत्र केवल cart-item एस स्वीकार करता है। ड्रॉप होने के बाद कार्ट से किसी आइटम को निकालने के लिए यह remove() पर कॉल करता है।

इसे यहाँ काम कर देखें: http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

आप सूची में किसी भी श्रेणी के लिए गाड़ी से वापस एक आइटम खींच सकते हैं, लेकिन मुझे लगता है कि यह बहुत आइटम केवल उनके मूल श्रेणियों के लिए खींचने योग्य बनाने के लिए आसान होगा।