JQuery-UI ड्रैगगेबल मूल पॉप पर रीसेट करें।

Question

यह शायद करना बहुत आसान है, लेकिन मैं हमेशा बहुत जटिल सोचता हूं।

मैंने अभी एक निश्चित चौड़ाई/ऊंचाई + फ्लोट के साथ #draggable/#droppable के साथ एक सरल परीक्षण स्थापित किया है: बाएं।

मैं फिर एक रीसेट बटन #droppable पर स्नैप किए जाने के बाद # मूलभूत स्थिति में #draggable को रीसेट करने में सक्षम होना चाहता हूं। (नीचे पंक्ति)

$(document).ready(function() { 

    $("#draggable").draggable 
    ({ 
     revert: 'invalid', 
     snap: '#droppable', 
     snapMode: 'corner', 
     snapTolerance: '22' 

    }); 
}); 

    $("#droppable").droppable 
    ({ 
     accept: '#draggable', 
     drop: function(event, ui) 
     { 
      $(this).find("#draggable").html(); 
     } 
}); 

    $(".reset").click(function() { 
    /* What do I put here to reset the #draggable to it's original position before the snap */ 
}); 

Answer 1

खींचने योग्य आइटम अपनी मूल स्थिति का ट्रैक नहीं रखते हैं जो मुझे पता है; केवल ड्रैग के दौरान और वापस snapped करने के लिए। तुम सिर्फ हालांकि अपने दम पर ऐसा कर सकते हैं,:

$("#draggable").data({ 
    'originalLeft': $("#draggable").css('left'), 
    'origionalTop': $("#draggable").css('top') 
}); 

$(".reset").click(function() { 
    $("#draggable").css({ 
     'left': $("#draggable").data('originalLeft'), 
     'top': $("#draggable").data('origionalTop') 
    }); 
}); 

http://jsfiddle.net/ExplosionPIlls/wSLJC/

Answer 2

मैं एक परियोजना

$("#reset").click(function() { 
    $(".draggable-item").animate({ 
     top: "0px", 
     left: "0px" 
    }); 
}); 

मेरे लिए चाल किया

Answer 3

मैं बस मिला है पर इस का इस्तेमाल किया निम्नलिखित के साथ बड़ी सफलता:

$(".draggable-item").removeAttr("style"); 

Answer 4

मैंने h0dges के मूल विचार का उपयोग किया। मैंने जो गेंदें बनाई हैं, वे अपनी मूल स्थिति में लौट आए, लेकिन मैंने उन शैलियों को खो दिया जो उन्हें गेंदों में बनाते थे। इसलिए, मैंने गेंदों की शैलियों को रखा और बस अपनी मूल स्थिति में लौटने के लिए अपनी शीर्ष और बाएं शैलियों को रीसेट कर दिया:

function endRound() { 
    $(".ball").css({"top":"", "left":""}); 
}