स्थिति

Question

पर आधारित एक jquery UI draggable की स्थिति को वापस कैसे करें मेरे पास एक तत्व है जो ड्रैग करने योग्य है और एक तत्व जो ड्रॉप करने योग्य है।

if(draggedelement == value){ 

$(draggedelement).hide(); 

} 
else{ 

$(draggedelement).revert(); 

} 

जहां revert() समारोह अपने मूल स्थिति में वापस घसीटा आइटम ले जाता है: एक बार घसीटा आइटम dropzone पर गिरा दिया जाता है मैं निम्नलिखित jQuery छद्म कोड निष्पादित करने के लिए कोशिश कर रहा हूँ।

कोई इसे कैसे पूरा करेगा?

पीएस मैं ड्रैगगेबल 'रिवर्ट' विकल्प से अवगत हूं, हालांकि यह केवल तभी सक्रिय होता है जब ड्रैग किए गए आइटम को ड्रॉपज़ोन में नहीं बनाया जाता है।

Answer 1

वहाँ इसके लिए कुछ अंतर्निहित विकल्प हैं, आपके .draggable() पर, revert option से 'invalid' पर सेट करें, और यदि यह नहीं था तो यह वापस जायेगा सफलतापूर्वक एक droppable पर डाला जाता इस तरह:

$("#draggable").draggable({ revert: 'invalid' }); 

फिर अपने .droppable() सेट क्या, एक बूंद accept option का उपयोग कर के लिए मान्य है, उदाहरण के लिए में

:

$("#droppable").droppable({ accept: '#draggable' });​ 

कुछ भी नहीं इस चयनकर्ता मिलान जब तुम चलो रीसेट हो जाता है जाओ, you can see a full demo here। स्वीकार विकल्प भी एक समारोह लेता है अगर आप, छानने एक चयनकर्ता प्रदान नहीं कर सकते की जरूरत है इस तरह:

$("#droppable").droppable({ 
    accept: function(dropElem) { 
    //dropElem was the dropped element, return true or false to accept/refuse it 
    } 
});​ 

Answer 2

उस कोड को "ड्रॉप" ईवेंट में जोड़ने का प्रयास करें। यहां एक demo है।

एचटीएमएल

<div class="draggable ui-widget-content correct"><p>1</p></div> 
<div class="draggable ui-widget-content"><p>2</p></div> 
<div class="draggable ui-widget-content"><p>3</p></div> 
<div class="draggable ui-widget-content"><p>4</p></div> 
<br style="clear: both"> 
<div id="droppable" class="ui-widget-header"> 
    <p>Drop me here</p> 
</div> 

स्क्रिप्ट

$(function() { 

$(".draggable").draggable({ revert: true }); 

$("#droppable").droppable({ 
    activeClass: 'ui-state-hover', 
    hoverClass: 'ui-state-active', 
    // uncomment the line below to only accept the .correct class.. 
    // Note: the "drop" function will not be called if not ".correct" 
    // accept : '.correct', 
    drop: function(event, ui) { 
    // alternative method: 
    // if (ui.draggable.find('p').text() == "1") { 
    if (ui.draggable.is('.correct')) { 
    $(this).addClass('ui-state-highlight').find('p').html('You got it!'); 
    // cloning and appending prevents the revert animation from still occurring 
    ui.draggable.clone(true).css('position', 'inherit').appendTo($(this)); 
    ui.draggable.remove(); 
    } else { 
    $('#droppable > p').html('Not that one!') 
    setTimeout(function(){ $('#droppable > p').html('Drop here'); }, 1000); 
    } 
    } 
}); 

}); 

आप स्क्रिप्ट में देख सकते हैं, आप .correct वर्ग या पाठ के अंदर के लिए देख सकते या तो (लाइन पर टिप्पणी की)

Answer 3

$("#droppable").droppable({ 
    accept: function(dropElem) { 
     //dropElem was the dropped element, return true or false to accept/refuse it 
     if($(this).data('stoneclass') == dropElem.attr("id")){ 
      return true; 
    } 
} 
});​ 

यह स्वीकार करने के लिए इस्तेमाल किया गया था केवल एक खींचने योग्य, draggables के एक समूह से; Droppables के एक समूह में, एक सही droppable करने के लिए।

पी.एस भाषा के लिए खेद है अगर यह समझ में आता नहीं है =)

Answer 4

मैं एक का उपयोग मामला है जहाँ मैं droppable के ड्रॉप विधि में कुछ तर्क को चलाने के लिए निर्धारित करने के लिए खींचने योग्य वापस लौटने चाहिए था।

$('.draggable-elements').draggable({ 
 
    revert: function() { 
 
    if ($(this).hasClass('drag-revert')) { 
 
     $(this).removeClass('drag-revert'); 
 
     return true; 
 
    } 
 
    } 
 
}); 
 

 
$('.droppable-elements').droppable({ 
 
    drop: function(event, ui) { 
 
    if (% conditional logic check here %) { 
 
     return $(ui.draggable).addClass('drag-revert'); 
 
    } 
 
    } 
 
});

मेरे उपयोग के मामले एक टेबल है जहां प्रत्येक कोशिका एक droppable एक 5 मिनट की अवधि का प्रतिनिधित्व करती हैं: मैं इस लक्ष्य को हासिल करने के लिए निम्न प्रयोग किया जाता है। मेरे ड्रैगगेबल्स बुकिंग हैं जो एक सेल में शुरू होती हैं, लेकिन बुकिंग समय का प्रतिनिधित्व करने के लिए एक पंक्ति में कई सेल्स पर चलती हैं।

मैं नहीं चाहता था कि कोई ड्रैगगेल ओवरलैप हो, क्योंकि यह एक डबल बुकिंग का प्रतिनिधित्व करेगा। तो, ड्रॉप के बाद मुझे पंक्ति में सभी ड्रैगगेबल्स मिलते हैं, जिसे मैंने अभी ले जाया है, और किसी भी ओवरलैप की जांच करें।यदि ओवरलैप है, तो मेरा सशर्त तर्क सत्य लौटाता है और मैं ड्रैगगेबल को वापस लाता हूं।

अगला चरण डेटाबेस को अद्यतन करने के लिए एक ajax कॉल आग, यदि सर्वर-साइड तर्क का कहना है इस कदम अमान्य है मैं एक त्रुटि स्थिति लौटाने और खींचने योग्य वापस लौटने की उम्मीद है है।

पीएस यह मेरा पहला जवाब है, क्षमा करें अगर मैंने कुछ भी गलत किया है। अच्छे उत्तरों को खुशी से स्वीकार करने के तरीके पर सुझाव।

संपादित करें: मेरी AJAX कॉल की कोशिश के बाद, मुझे एहसास हुआ कि यह बात है draggable.revert समारोह चलाता है से पहले करने के लिए droppable.drop समारोह के लिए अवसर की एक खिड़की है। जब तक मेरा AJAX कॉल झूठा लौटा, तब तक खिड़की पार हो गई थी और कक्षा को ड्रैगगेबल के लिए बहुत देर हो चुकी थी। प्रतिक्रिया करने के लिए प्रतिक्रिया दें।

इस तरह के रूप में, मैं नहीं रह गया है, draggable.revert समारोह पर भरोसा कर रहा हूँ, बजाय केवल AJAX प्रतिक्रिया पर और झूठे अगर अभिनय, चेतन() का उपयोग कर खींचने योग्य यह मूल स्थिति है पर लौटने के लिए इस प्रकार है:

$('.draggable-elements').draggable(); 
 

 
$('.droppable-elements').droppable({ 
 
    drop: function(event, ui) { 
 
    var postData = { 
 
     id: 1, 
 
     ... 
 
    }; 
 
    $.post('/ajax/url', postData, function(response) { 
 
     var response = $.parseJSON(response); 
 
     if (response.status != 1) { 
 
     return ui.draggable.animate({left: 0, top: 0}, 500); 
 
     } 
 
    } 
 
    } 
 
});

आप डेटा विशेषताओं के रूप में draggable.start/खींचें मूल छोड़ दिया और खींचने योग्य के शीर्ष मान जोड़ने की आवश्यकता हो सकती है, लेकिन मेरे लिए ऊपर ठीक काम किया।

Answer 5

मैंने पाया है कि अगर मैं बस शीर्ष सेट: 0 और छोड़ दिया: 0, आइटम नहीं रह गया है खींचने योग्य। एक वापसी को "मजबूर" करने के लिए मुझे यह करना पड़ा:

$draggedObj.css({ top: 0, left: 0 }) 
$draggedObj.draggable("destroy") 
$draggedObj.draggable({...whatever my draggable options are...});