2011-04-07 17 views
5

मैं jQuery का उपयोग कर रहा में एक jQuery खींचने योग्य अस्वीकार करने के लिए तय करने के लिए और मैं निम्नलिखित समस्या है:कैसे स्वीकार करने या droppable

मेरी साइट में मैं टुकड़े के साथ बिसात है। प्रत्येक वर्ग सफेद या काले दिखाने के लिए पृष्ठभूमि संपत्ति के साथ एक साधारण div है। इन वर्गों (divs के अंदर) में मैंने एक वर्ग टैग को संदर्भित किया है जो कि उस वर्ग के ऊपर होना चाहिए। कुछ ऐसा:

<div id="a8" class="square" style="background-image: url('/images/background_white.png')"> 
<img id="piece_a8" class="piece" src="/images/rook_black.png" /> 
</div> 

मैं jQuery का उपयोग कर टुकड़ों के आंदोलन को नियंत्रित कर सकता हूं। प्रत्येक piece -class img एक खींचने योग्य है और प्रत्येक square -class div एक ड्रॉप करने योग्य है। मेरे पास पहले से ही एक सर्वर-साइड फ़ंक्शन है, जो निर्देशांक का एक सेट दिया गया है, "VALID" देता है यदि आंदोलन मान्य है, और "INVALID" अन्यथा। मेरा विचार है, अगर सर्वर "INVALID" लौटाता है, तो टुकड़ा अपने मूल वर्ग में वापस आना चाहिए, और यदि सर्वर "वैलीड" देता है, तो टुकड़ा अपने नए वर्ग में रहना चाहिए, लक्ष्य वर्ग के अंदर हर दूसरे टुकड़े को हटा देना चाहिए।

मेरी समस्या यह है कि, मुझे नहीं पता कि मैं अपने jQuery कोड में इस वापसी मूल्य को कैसे लागू कर सकता हूं। मैंने ड्रैगगेबल की revert संपत्ति में accept और drop फ़ंक्शन में फ़ंक्शंस डालने का प्रयास किया है, लेकिन मुझे नहीं मिला है कि $.get को झूठी या सही कैसे करें।

किसी भी मदद की वास्तव में सराहना की जाएगी।

अग्रिम धन्यवाद,

उत्तर

5

कोई बात नहीं लेस्टर, जवाब दे दिया।

मामले में किसी को पता करने के लिए की जरूरत है, चाल 2 भागों में है:

पहले: खींचने योग्य परिभाषा में, शुरुआत घटना के तहत एक समारोह है कि मूल स्थिति की बचत होती है जोड़ें। इस तरह:

$('item_to_drag').draggable({ 
    start: function(){ 
     $(this).data("origPosition",$(this).position()); 
    } 
}); 

दूसरा: droppable परिभाषा में, ड्रॉप घटना में, आपके .Get करते हैं और जवाब पर कार्रवाई करने के एक समारोह का उपयोग करें; यदि आपकी स्थितियां पूरी नहीं हुई हैं, तो ड्रैगगेबल को अपनी मूल स्थिति में वापस एनिमेट करें। इस तरह:

drop: function (event, ui) { 
     $.get(url,function(data) { 
      if (data == '"INVALIDO"') 
      { 
       ui.draggable.animate(ui.draggable.data("origPosition"),"slow"); 
      } 
      else 
      { 
       //store new positions, whatever; 
      } 
     } 
    ); 
} 

यह चाल करेगा।

उत्तर का हिस्सा यहां से आया: In jQuery, how to revert a draggable on ajax call failure?

+0

आप यह दिखाने के लिए चूक गए कि आपने ** अंतिम स्थिति ** को अपनी सेवा में कैसे पारित किया – lurscher

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