JQuery यूआई: droppable ड्रॉप

Question

मैं JQuery 1.5.1 और JQuery यूआई 1.8.11 उपयोग कर रहा हूँ पर क्रमित करने योग्य रद्द करें।

मैं मदों की एक संख्या के लिए sortable जोड़ लिया है - यहाँ काम खींचें सॉर्ट करने के लिए अनुमति देने के लिए है, यह सब ठीक काम करता है।

लेकिन मैं यह भी, droppable शामिल करने के लिए इतना है कि आइटम एक "मुझे कॉपी" क्षेत्र पर छोड़ा जा सकता है चाहता हूँ - कार्य वहाँ आइटम नकल करने

समस्या (मुझे लगता है कि थोड़ा बाहर बाद में काम करेंगे) हो जाएगा ड्रॉपप्रेबल लक्ष्य क्रमबद्ध सूची के नीचे है (मैं इसे स्थानांतरित नहीं करना चाहता) और एक बार ड्रॉप होने पर क्रमबद्ध आइटम सूची के नीचे चला जाता है।

मुझे क्या करना चाहते हैं इस तरह जब ड्रॉप घटना आग रद्द है।

You can see my problem in action here (बस खींचें "आइटम 1" पर क्षेत्र "ड्रॉप वस्तु को कॉपी करने" और आप तरह रद्द कर दिया नहीं प्राप्त करता है देखेंगे)

आप देख सकते हैं मैं कोशिश की है droppable "ड्रॉप में निम्नलिखित "घटना (JQuery यूआई डॉक्स से सुझाव दिया है), लेकिन यह काम करने के लिए प्रतीत नहीं होता ...

$(this).sortable('cancel'); 

मैं भी कैसे इस लक्ष्य को हासिल करने के लिए किसी भी अन्य सिफारिशों के लिए खुला रहा हूँ" "मैं देख रहा हूँ प्रभाव नकल करने के लिए ड्रॉप।

धन्यवाद

Answer 1

ठीक है, तो मैं एक समाधान है जो काम करता है बाहर काम किया है। आप sortable समारोह के "रोक" स्थिति में यह पूछना चाहते हैं तो

रद्द कोड काम करता है। हालांकि, यह केवल "वापसी" पूरा होने के बाद ही लागू होगा। समस्या यह है कि मैं ड्रॉपपेल "ड्रॉप" घटना से तत्व को कॉपी/वापस करने की कोशिश कर रहा था और यह बहुत जल्दी था।

समाधान पूरा करने के लिए है, और इस मैं एक "का इंतजार प्रतिलिपि" झंडा बनाने के लिए, "बंद करो" घटना में जांच की जानी थी प्राप्त करने के लिए "बंद" घटना के लिए इंतजार करना है।

Here is an example

यह अभी भी सही (UX वार) महसूस नहीं करता है लेकिन यह सही काम करता है, और आप हमेशा sortable समारोह पर झूठे करने के लिए वापस एक थोड़ा बेहतर महसूस करने के लिए सेट कर सकते हैं।

इस प्रकार उदाहरण से कोड है ...

var itemCount = 3; 
var awaitingCopy = false; 

$(init); 

function init() { 
    $("#Items").sortable({ 
     revert: true, 
     placeholder: "ItemPlaceHolder", 
     opacity: 0.6, 
     start: StartDrag, 
     stop: StopDrag 
    }); 

    $("#CopyItem").droppable({ 
     hoverClass: "CopyItemActive", 
     drop: function(event, ui) { 
      awaitingCopy = true; 
     } 
    }); 

    $("#NewItem").click(function(e) { 
     e.preventDefault(); 
     itemCount++; 
     var element = $("<div class='Item'>Item " + itemCount + "</div>"); 
     $("#Items").append(element); 
     element.hide().slideDown(500); 
    }); 
} 

function CopyItem(element) { 
    awaitingCopy = false; 
    var clone = element.clone(); 
    $("#Items").append(clone); 
    clone.hide().slideDown(500); 
} 

function StartDrag() { 
    $("#NewItem").hide(); 
    $("#CopyItem").show(); 
} 

function StopDrag(event, ui) { 
    if (awaitingCopy) { 
     $(this).sortable('cancel'); 
     CopyItem($(ui.item)); 
    } 
    $("#NewItem").show(); 
    $("#CopyItem").hide(); 
} 

वैसे भी, उम्मीद है कि इस में मदद मिलेगी जो दूसरों प्रभाव का एक ही तरह चाहते हैं ... कोई मेरी डिजाइन चोरी हालांकि;)