JavaScript拖放代理

Question

我想在我的Web應用程序上啓用拖放行爲。我有我想要拖動的圖像。圖像位於另一個具有透明部分的圖像的後面，以便您可以在其下看到圖像。我不想改變圖像的順序。我的想法是，我應該在透明的兩張圖片之上使用另一圖層，並將其用作將事件轉移到要拖動的圖像的代理。 jQuery UI的draggable函數不會允許我實時傳輸事件，也就是說，只有當它完成時，我才能掛鉤它在拖動時發生的事情。

是否有一個JavaScript庫或jQuery插件，允許我在一個元素上啓用拖放功能，並實時將這些事件轉移到另一個元素上？

Answer 1

也許我不明白你想要完成什麼，但是你應該能夠毫無困難地拖放重疊圖像（demo）。

在一個div只是包裝兩個圖像，然後進行DIV拖動：

CSS（不需要進行相對.dragme位置，因爲它是在拖動腳本來完成）

.dragme img { 
position: absolute; 
top: 0; 
left: 0; 
} 

HTML

<div class="dragme"> 
<img src="image1.gif"> 
<img src="image2.gif"> 
</div> 

腳本

$(".dragme").draggable(); 

---

我更新了the demo，這並不漂亮，可能有更好的方法，但基本上這會在框架上放置一個隱形疊加層，然後在覆蓋層被拖動時定位圖像。

CSS

#draggable, #droppable { 
width: 450px; 
height: 250px; 
padding: 0.5em; 
margin: 10px; 
background: #ddd; 
color:#000; 
} 
.dragme { 
position: relative; 
width: 100px; 
padding: 5px; 
} 
.dragme img { 
position: absolute; 
top: 55px; 
left: 30px; 
} 
.demo { 
width: 500px; 
} 
.border { 
position: absolute; 
top: 75px; 
left: 30px; 
z-index: 1; 
} 

HTML

<div class="demo"> 
<div class="border"> 
    <img src="http://www.imageuploading.net/image/thumbs/large/border-564.png"> 
</div> 
<div id="draggable" class="ui-widget-content"> 
    <p>Drag from here</p> 
    <div class="dragme"> 
    <img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif"> 
    </div> 
</div> 
<div id="droppable"> 
    <p>Drop here</p> 
</div> 
</div> 

腳本（該演示使用$（文件）。就緒，因爲的jsfiddle不喜歡$（窗口）.load）

$(window).load(function(){ 
// cycle through draggable divs (in case there are more than one) 
$(".dragme").each(function(){ 
    var img = $(this).find('img'); 
    var pos = img.position(); 
    // create div overlay on image 
    $('<div/>', { 
    class : 'overlay', 
    css: { 
    position: 'relative', 
    top: pos.top, 
    left: pos.left, 
    width: img.outerWidth(), 
    height: img.outerHeight(), 
    zIndex: 100 
    } 
    }) 
    // save original image position 
    .data('pos', [pos.left, pos.top]) 
    .appendTo($(this)); 

    // make overlay draggable 
    $(this).find('.overlay').draggable({ 
    containment : '.demo', 
    revert: true, 
    revertDuration: 0, 
    handle: 'div', 
    // drag overlay and image 
    drag: function(e,ui){ 
    img = $(this).parent().find('img'); 
    img.css({ 
    top: ui.position.top, 
    left: ui.position.left 
    }); 
    }, 
    // make image revert 
    stop: function(e,ui){ 
    pos = $(this).data('pos'); 
    $(this).parent().find('img').animate({left: pos[0], top: pos[1] },500); 
    } 
    }); 
}); 

$("#droppable").droppable({ 
    drop : function(e,ui) { 
    // append entire div wrapper (.dragme) 
    ui.helper.parent().appendTo($(this)); 
    } 
}); 
});