Ausblenden div, wie es in der Nähe eines anderen div gezogen wird

Question

Ich habe eine ziehbare div, die in eine droppable Div fallen gelassen werden kann. Das funktioniert gut. Das ziehbare Div enthält ein span Element. Ich möchte, dass dieses span Element ausblendet, während es sich dem dropfähigen div nähert.

Ich habe eine ziehbare Ausblendung/in Beispiel basierend auf einer anderen Antwort, die gilt, wenn Sie das Element an die Seite des Fensters ziehen. Ich habe versucht, dies zu ändern, um meine Bedürfnisse zu erfüllen, aber es funktioniert nicht aus irgendeinem Grund.

---

Ziehen Sie den roten Platz auf die rechte Seite. Sie werden bemerken, dass es ein- und ausblendet, wenn Sie es ziehen.

Demo Fiddle 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()); 
    } 
}); 

---

Mein Versuch, diese zu modifizieren, um das Verhalten oben erklärt zu haben.

Demo 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

Sie müssen die ui Position zu bekommen. Dann musst du das mit dem Abstand vom div berechnen.

Fiddle 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) { 

    } 
}); 

bearbeiten

Wenn Sie es allmählicher mögen, dann die Position Start und dann den Prozentsatz berechnet auf der Schleppe Position basiert.

Fiddle 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) { 

    } 
});