div को फीका करें क्योंकि यह किसी अन्य div

Question

के पास खींच लिया गया है मेरे पास एक ड्रैगगेबल div है जिसे ड्रॉपप्रेबल div में छोड़ दिया जा सकता है। यह ठीक काम करता है। ड्रैगगेबल div में span तत्व होता है। मुझे यह span तत्व फीका होगा क्योंकि यह ड्रॉपपेल div के पास आता है।

मैं एक खींचने योग्य fadeout/उदाहरण में एक और जवाब है, जब आप विंडो के पक्ष को तत्व खींचें करने के लिए लागू होता है पर आधारित है। मैंने अपनी जरूरतों को पूरा करने के लिए इसे संशोधित करने की कोशिश की लेकिन यह कुछ कारणों से काम करने के लिए sem sem नहीं है।

---

लाल स्क्वायर को दाएं हाथ से खींचें। जब आप इसे खींचते हैं तो आप इसे fades में/बाहर देखेंगे।

डेमो फिडल http://jsfiddle.net/EybmN/32/

$('#draggable').draggable({ 
    drag: function(event, ui) { 
    console.log(ui.helper.find('span')); 
    ui.helper.find('span').css('opacity', 1 - ui.position.left/$(window).width()); 
    } 
}); 

---

इस संशोधित व्यवहार के लिए मेरे प्रयास ऊपर बताया गया है।

डेमो http://jsfiddle.net/EybmN/30/

$('#draggable').draggable({ 
    drag: function(event, ui) { 
    console.log(ui.helper.find('span')); 
    $el = $('.droppable.blue'); 
    var bottom = $el.position().top + $el.outerHeight(true); 
    var $span = ui.helper.find('span'); 
    $span.css('opacity', 1 - $span.top/bottom); 
    } 
}); 

Answer 1

आप ui स्थिति प्राप्त करने के लिए की जरूरत है। फिर आपको div से दूरी के साथ इसकी गणना करने की आवश्यकता है।

फिडल http://jsfiddle.net/EybmN/34/

$('#draggable').draggable({ 
    connectToDroppable: '.droppable', 
    revert: 'invalid', 
    drag: function(event, ui) { 
    var $span = ui.helper.find('span'); 
    var opacity = ((ui.helper.offset().top - ui.helper.outerHeight()) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight()))/100; 
    $span.css('opacity', opacity); 
    } 
}); 
$(".droppable").droppable({ 
    accept: '#draggable', 
    drop: function(event, ui) { 

    } 
}); 

संपादित

आप इसे और अधिक क्रमिक चाहते हैं, तो प्रारंभ स्थिति और फिर खींच स्थिति के आधार पर प्रतिशत की गणना।

फिडल http://jsfiddle.net/EybmN/35/

var startPos = 0; 
$('#draggable').draggable({ 
    connectToDroppable: '.droppable', 
    revert: 'invalid', 
    drag: function(event, ui) { 
    if(!startPos) startPos = ui.helper.offset().top; 
    var $span = ui.helper.find('span'); 
    var opacity = (ui.helper.offset().top - (ui.helper.outerHeight()*2.5) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight()))/startPos + .5; 
    $span.css('opacity', opacity); 
    } 
}); 
$(".droppable").droppable({ 
    accept: '#draggable', 
    drop: function(event, ui) { 

    } 
});