jQueryUI droppable, आप यहाँ देख सकते हैं ओवरलैप भाई

Question

को प्रचार बंद करो: http://jsfiddle.net/rA4CB/6/

जब मैं ओवरलैप क्षेत्र यह दोनों droppables में प्राप्त होता है में गिरावट बनाने, लालची जब आइटम भाई बहन हैं काम नहीं करता। ZIndex में कम ड्रॉपपेल पर रिसेप्शन को अवरुद्ध करने का कोई तरीका है?

बीटीडब्ल्यू, माउसओवर ड्रॉपपेल तत्व के लिए आग नहीं डालेगा क्योंकि माउस वास्तव में ड्रैग करने योग्य तत्व पर है।

प्रासंगिक जे एस:

$(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     tolerance:'pointer', 
     drop: function(event, ui) { 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("p") 
        .html("Dropped!"); 
     } 
    }); 
    $("#droppable2").droppable({ 
     tolerance:'pointer', 
     greedy:true, 
     drop: function(event, ui) { 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("p") 
        .html("Dropped!"); 
     } 
    }); 
}); 

Answer 1

ठीक है, तो मैं एक घंटे में यह पता लगाने की कोशिश खर्च करते हैं, फिर जैसे ही मैं मैं पूछता हूँ तो मेरा उत्तर

http://jsfiddle.net/rA4CB/7/

खोजने के संशोधित जे एस निम्नलिखित के लिए:

$(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     tolerance:'pointer', 
     drop: function(event, ui) { 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("p") 
        .html("Dropped!"); 
     } 
    }); 
    $("#droppable2").droppable({ 
     tolerance:'pointer', 
     greedy:true, 
     drop: function(event, ui) { 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("p") 
        .html("Dropped!"); 
     }, 
     over: function(event, ui){ 
      $("#droppable").droppable("disable") 
     }, 
     out: function(event, ui){ 
      $("#droppable").droppable("enable") 
     } 
    }); 
}); 

Answer 2

मुझे एक ही समस्या थी और एक छोटी पीएल Ugin :)

यह बाहर की जाँच:

https://stackoverflow.com/a/16720944/1308461

Answer 3

मुझे लगता है कि # invertedSpear की विधि का उपयोग यूआई राज्य परिवर्तन जो कुछ मामलों में वांछनीय नहीं है कारण होगा। कोड यहाँ है।

var lastOpertion = new Date().getTime(); 

drop: function (event, ui) { 
     if (new Date().getTime() - lastOpertion < 100) return; 
     lastOpertion = new Date().getTime(); 
     .... 
} 

Answer 4

आप तो एक कंटेनर क्षेत्र में droppable के नंबर है, तो क्या ????

आपको उस समस्या के बारे में फिर से सोचना चाहिए। लालची केवल बच्चों के रिश्ते के लिए माता-पिताभाई बहन में काम करता है। तो आपको ड्रॉपपेबल जेएस संपादित करना होगा या इसके लिए अपना तर्क डालना होगा।

तो अगर आप droppable का एक नंबर है तो आप के रूप में यह इस उदाहरण A number of siblings droppables

में है सही भाई बहन droppable बनाने के लिए नीचे के रूप में अपने droppbale संशोधित सही droppable पर छोड़ने को संभालने के लिए कुछ अतिरिक्त कोड लिखना चाहिए

 var topElement = undefined; 
     var topElementArray = Array(); 

     $("#draggable").draggable(); 
     $(".droppableBox").droppable({ 
      activeClass: "active-droppable", 
      tolerance:'pointer', 
      over: function(event, ui) { 
       // This is for only show a message that z-index must be required for proppable 
       // you can remove it after testing or after development 
       if ($(this).css("z-index") == 'auto') { 
        alert("Please provide z-index for every droppable."); 
        return; 
       } 
       // 

       topElement = undefined; 
       topElementArray = Array(); 
       // Change it as you want to write in your code 
       // For Container id or for your specific class for droppable or for both 
       $('#demo > .droppableBox').each(function(){      
        _left = $(this).offset().left, _right = $(this).offset().left + $(this).width(); 
        _top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height(); 
        if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) { 
          topElementArray.push($(this).attr('id')); 
        } 
       }); 
      }, 
      drop: function(event, ui) { 
       if (!topElement) { 
        topElement = determineTopElement(topElementArray); 
       }     
       if ($(this).attr('id') == $(topElement).attr('id')) { 
        $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); 
        // Your code after successful dropped element on specific siblings 
        // Start writing code for dropped element & perfect droppable 
       } 

      } 
     }); 

     determineTopElement = function(_array) { 
      var topElement; 
      var zIndexHighest = 0; 
      for (i = 0; i < _array.length; i++){ 
       var element = $("#"+ _array[i]); 
       var z_index = $(element).css("z-index"); 
       if(z_index > zIndexHighest){ 
        zIndexHighest = z_index; 
        topElement = element; 
       } 
      } 
      return topElement;  
     } 

Answer 5

कुछ circonstances में:

myjQuery.droppable({ 
    over:function(evt,ui){ 
    ui.draggable.attr('drg_time', this.drg_time = evt.timeStamp) 
    }, 
    accept:function(draggeds){ 
    if(draggeds.attr('drg_time')) 
    { 
     return draggeds.attr('drg_time') == this.drg_time 
    } 
    return draggeds.hasClass('acceptable_classes_here') 
    }, 
    out:function(evt,ui){ 
    // useless but cleaner 
    ui.draggable.removeAttr('drg_time') 
    } 
    drop:..., 
}) 

Answer 6

ui ड्रॉप करने योग्य में लालची विकल्प आज़माएं। डेमो के लिए नीचे दिए गए लिंक बेला देखें:

http://jsfiddle.net/creators_guru/3vT5C/embedded/result/

$(".circles").droppable({ 
    greedy: true, 
    drop: function(event, ui) { 
     $_data = ('drgged class = ' + ui.draggable.attr('class')); 
     $_data1 = ('droped id = #' + $(this).attr('id')); 
     $('#data').html($_data + '<br/>'+$_data1); 
     return false; 
    } 
}); 

Answer 7

$("#droppable").droppable({ 
    greedy: true, 
    drop: function(event, ui) { 
     if(ui.helper.is(".dropped")) { 
      return false; 
     } 
     ui.helper.addClass(".dropped"); 
    } 
}); 

बस खींचने योग्य की ui.helper पर एक सीएसएस वर्ग निर्धारित किया है। यदि ड्रैगगेबल को एक बार स्वीकार कर लिया गया है, तो इसे अन्य सभी ड्रॉपपैबल्स द्वारा अस्वीकार कर दिया जाएगा (ड्रॉपप्रेबल "स्वीकृति" पैरामीटर के साथ भी किया जा सकता है, जैसे accept : ":not(.dropped)" और वर्ग ui.draggable में जोड़ा गया है)।

Answer 8

तो, जब सरल समाधान खोजने की कोशिश कर मैं इस के साथ आया था (और यह मेरे लिए काम करता है):

  window.overNowOnThis = ""; 
      window.olderOnes = []; 
      $obj.droppable({ 
       accept: ".draggable_imgs", 
       drop: function(e, ui) { 
        if(window.overNowOnThis == this){ 
         // Do whatever 
        } 
       }, 
       over: function(event, ui){ 
        window.olderOnes.push(window.overNowOnThis); 
        window.overNowOnThis = this; 
       }, 
       out: function(){ 
        var lastElem = window.olderOnes.pop(); 
        window.overNowOnThis = lastElem; 
       } 
      }); 

शीर्ष तत्व क्योंकि पर यह "पर" पिछले एक आग चुना जाएगा। इसके अलावा - यदि दो से अधिक भाई बहन हैं - तो तत्व से बाहर निकलने पर हम अंतिम को वर्तमान के रूप में सेट करते हैं। वैश्विक "विंडो" का उपयोग उदाहरण के लिए किया गया था। बेहतर विकल्प कक्षाओं का उपयोग करेगा क्योंकि यह सुरक्षित रूप से डेटा रख सकता है।

Answer 9

यह उल्टा स्पीयर उत्तर के समान ही है। मैं क्योंकि सक्षम/अक्षम करने के अंदर/"बाहर" मेरे लिए काम नहीं किया "पर" यह एक छोटा सा बदलना पड़ा मैं नीचे के बजाय

$("#droppable2").droppable({ 
    greedy: true, 
    drop: function (event, ui) { 
     $("droppable").droppable("disable"); 
    } 
} 

मैं स्पष्ट रूप से जब सक्षम करने के लिए "droppable" div था करना था मुझे यह चाहिए था। उदाहरण के लिए, ड्रैग इवेंट शुरू करते समय इसे सक्षम करें। उदाहरण के लिए

$("#drageMe").draggable({ 
start:function(event,ui){ 
    $("droppable").droppable("enable"); 

} })