jquery draggable element ड्रॉप

के बाद ड्रैग करने योग्य नहीं है मैं बार-बार उसी स्रोत तत्व को खींच और छोड़ने में सक्षम होना चाहता हूं।jquery draggable element ड्रॉप

इस समय जब कोई छवि खींची जाती है, तो इसे सफलतापूर्वक क्लोन किया जाता है - यह मूल छवि रखी जाती है और क्लोन अच्छी तरह से अपने नए स्थान पर गिर जाता है, लेकिन पुरानी छवि अब खींचने योग्य नहीं है। तत्व का निरीक्षण class को एक विशेषता के रूप में दिखाता है (कोई मूल्य नहीं) i.e. class="ui-draggable"

जैसा कि आप देखेंगे कि मैंने क्लोनिंग के बाद मूल पर ड्रैगगेबिलिटी को फिर से सक्षम करने का प्रयास किया है, लेकिन यह काम नहीं कर रहा है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
    <title></title> 
    <script language="javascript" type="text/javascript"> 
    var copy = 0; 
    var dragOptions = { 
     helper: 'clone', 
     cursor: 'hand', 
     revert: 'invalid' 
    }; 
    $(document).ready(function() { 
     $("img").draggable(dragOptions); 
     $("ul#bag > li").droppable({ 
     drop: function (event, ui) { 
      copy++; 
      var clone = $(ui.draggable).clone().attr("id", "img_" + copy); 
      $(this).append(clone); 
      clone.css("left", 0).css("top", 0); 
      $(ui.draggable).draggable(dragOptions); 
     } 
     }); 
    }); 
</script> 
    <style type="text/css"> 
    li 
    { 
     position: relative; 
     float: left; 
    } 

    img 
    { 
     cursor: move; 
    } 

    div, li 
    { 
     display: block; 
     width: 160px; 
     height: 123px; 
     margin: 2px; 
     border: solid 1px gray 
    } 

    .clear 
    { 
     clear: both; 
    } 
    </style> 
</head> 
<body> 

    <ul id="bag"> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 

    <ul id="shop"> 
    <li><img id="img1" src="images/p1.jpg" /></li> 
    <li><img id="img2" src="images/p2.jpg" /></li> 
    <li><img id="img3" src="images/p3.jpg" /></li> 
    </ul> 

    <div class="clear" id="dustbin" style="background-color:Black;"></div> 
</body> 
</html>

स्रोत

2011-02-16 jenson-button-event

तो, ऐसा लगता है कि एक बार आइटम घसीटा जाता है, खींचने योग्य विजेट का अपना नष्ट() फ़ंक्शन जो तत्व से draggability के किसी भी झलक को हटा कॉल:

कोड यह रहा।

विकल्प या घटनाओं के साथ इस अधिभावी की कोई प्रत्यक्ष रास्ता साथ

, मैं document.ready में जानवर बल के साथ अधिरोहित किया है:

$ .ui.draggable.prototype.destroy = समारोह (उल, आइटम) { };

यह अब काम करता है।

स्रोत

2011-02-17 09:23:07

समाधान ढूंढने के लिए धन्यवाद। – Couto

यह मेरे लिए कुछ भी नहीं बदला, वास्तव में कुछ सरल परीक्षण से पता चलता है कि विनाश विधि को कभी भी ड्रॉप पर नहीं बुलाया जाता है। –

समाधान ढूंढने के लिए धन्यवाद। हालांकि मुझे वास्तव में विनाश विधि की आवश्यकता है ... इसलिए अपने समाधान का उपयोग करने के बाद, मैंने देशी विधियों को किसी अन्य विधि को सौंपा ... इसलिए मेरा मेरा समाधान ऐसा कुछ होगा;

$.ui.draggable.prototype.destroy = function (ul, item) { }; 
$.ui.draggable.prototype.remove = function() { 
    if(!this.element.data('draggable')) return; 
    this.element 
     .removeData("draggable") 
     .unbind(".draggable") 
     .removeClass("ui-draggable" 
      + " ui-draggable-dragging" 
      + " ui-draggable-disabled"); 
    this._mouseDestroy(); 

    return this; 
};

स्रोत

2011-02-20 22:04:58 Couto

मैं जानता हूँ कि यह पुराना है, लेकिन उन .destroy रखने की जरूरत है और यह एक ही नाम रखना चाहते हैं कि करने के लिए एक और समाधान प्रदान करने के लिए करना चाहता था।

मैं एक तत्व को draggable राज्य लागू करने के लिए एक समारोह बनाया ...

function MakeDraggable(ele) { 
    ele.draggable({ revert: "invalid" }); 
}

फिर .droppable तत्वों की drop संपत्ति के अंदर

मैं बस ...

MakeDraggable(ui.draggable);

यह पुनः तत्व को खींचने योग्य राज्य को सक्षम करता है।

स्रोत

2012-07-21 23:06:34 Jared

आप $ (ड्रैगगेबल) क्यों नहीं जोड़ेंगे .draggable(); अपनी बूंद के अंदर? यह आपके समाधान के समान ही काम करता है लेकिन कुछ कम लाइनों के साथ। –

jquery draggable element ड्रॉप

उत्तर

संबंधित मुद्दे