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)); 
    } 
}); 
});