JQuery UI ड्रैगगेबल सहायक को ड्रॉप करने योग्य बच्चों पर खींचा नहीं जा सकता

Question

अनिवार्य रूप से बच्चों को माता-पिता पर खींचा जा सकता है, लेकिन माता-पिता को बच्चों पर खींचा नहीं जा सकता है।

मैंने इसे प्रदर्शित करने के लिए एक सरल उदाहरण लिखा था। तीन divs जो एक दूसरे पर खींचने योग्य और droppable दोनों हैं। आप अपने माता-पिता को हरे या लाल रंग में नीला खींच सकते हैं और आप अपने माता-पिता लाल पर हरे रंग को खींच सकते हैं। आप अपने बच्चों को हरे या नीले रंग में लाल नहीं खींच सकते हैं और आप अपने बच्चे को नीले रंग में नहीं खींच सकते हैं।

मुझे संदेह है कि यह सहायक का उपयोग करने से संबंधित है। सहायक के बिना तत्वों को माउस कर्सर के साथ खींचा जाएगा, इसलिए अपने बच्चों पर एक तत्व छोड़ने का विचार समझ में नहीं आता है, लेकिन सहायक के साथ आप ऑब्जेक्ट क्लोन कर रहे हैं।

मैं अभिभावक तत्वों को बच्चों पर खींचने की अनुमति कैसे दे सकता हूं?

HTML:

<div class="first"> 
    <div class="second"> 
    <div class="third"></div> 
    </div> 
</div> 

जे एस:

$('div').draggable(
{ 
    revert: true, 
    helper: 'clone', 
    appendTo: 'body', 
    refreshPositions: true 
}); 

$('div').droppable(
{ 
    greedy: true, 
    accept: 'div', 
    activeClass: 'active', 
    hoverClass: 'hover', 
    tolerance: 'pointer', 
    drop: function(event, ui) 
    { 
     alert($(this).attr('class')); 
    } 
}); 

सीएसएस:

div 
{ 
    display: inline-block; 
    padding: 40px; 
} 
div.ui-draggable-dragging 
{ 
    outline: 2px solid black; 
} 
div.active 
{ 
    outline: 4px solid #0ff; 
} 
div.hover 
{ 
    background-color: #f0f; 
} 
.first 
{ 
    background-color: red; 
} 
.second 
{ 
    background-color: green; 
} 
.third 
{ 
    background-color: blue; 
    width: 50px; 
    height: 50px; 
} 

https://jsfiddle.net/5dhfmmxf/3/

(इसके अलावा खुद पर एक सहायक खींच करने के लिए इसी तरह के सवाल कर रहे हैं, बू यह विशेष रूप से उन बच्चों पर खींचने के बारे में है जो अलग हैं। उस ने कहा कि मैं एक समाधान की अपेक्षा करता हूं कि सहायक को बच्चों के साथ भी सहायक को खींचने की अनुमति दें)।

Answer 1

हैकी तरीके की तरह, लेकिन मुझे लगता है कि यह नौकरी करता है।

इसके बजाय helper: 'clone' का उपयोग करके, मैं मूल तत्व के रूप में उपयोग करने के लिए स्वयं तत्व को क्लोन करता हूं।

एक दृश्य मुद्दा, कैसे गिरा तत्व तो एक तेजी से ठीक के रूप में तस्वीरें, साथ था, मैं जोड़ दिया है: revertDuration: 0

https://codepen.io/anon/pen/GvbZdy