jQuery.draggable() - बटन पर वापस जाएं

Question

मेरे पास & droppable मेरे पृष्ठ पर तत्व हैं, जिनमें accept गुण हैं।

वर्तमान में मेरे कोड की तरह सेट किया गया है:

$(".answer." + answer).draggable({ 
    revert: "invalid" 
    , snap: ".graph" 
}); 
$(".graph." + graph).droppable({ 
    accept: ".answer." + answer 
}); 

इसलिए अगर जवाब सही नहीं है, इसकी अपनी मूल स्थिति में वापस लाया गया।

उपयोगकर्ता को पृष्ठ पर सभी को रीसेट करने की क्षमता भी आवश्यक है। मैं निम्नलिखित की कोशिश की है, लेकिन यह काम नहीं करता है: वहाँ

$("btnReset").click(function(){ 
    $(".graph.A").draggable({revert:true}); 
}); 

Answer 1

के बाद आपको क्या चाहिए करने के लिए कोई अंतर्निहित विधि, आपको वापसी व्यवहार अपने आप को अनुकरण करने के लिए होगा। आप प्रत्येक ड्रैग करने योग्य तत्व की मूल स्थिति को स्टोर कर सकते हैं और फिर रीसेट बटन पर क्लिक करते समय उन्हें उन पदों पर एनिमेट कर सकते हैं।

यहां एक सरलीकृत jsFiddle example है।

jQuery:

$("#draggable").draggable({ 
    revert: "invalid" 
}); 
$("#draggable2").draggable({ 
    revert: "invalid" 
}); 
$("#droppable").droppable({ 
}); 
$("#btnReset").click(function() { 
    $("#draggable, #draggable2").animate({ 
     "left": $("#draggable").data("left"), 
     "top": $("#draggable").data("top") 
    }); 
}); 
$(".ui-widget-content").data("left", $(".ui-widget-content").position().left).data("top", $(".ui-widget-content").position().top); 

HTML:

<div id="draggable" class="ui-widget-content"> 
    <p>I revert when I'm dropped</p> 
</div> 
<div id="draggable2" class="ui-widget-content"> 
    <p>I revert when I'm dropped</p> 
</div> 
<button id="btnReset">Reset</button> 
<div id="droppable" class="ui-widget-header"> 
    <p>Drop me here</p> 
</div>​