jQuery Draggable与重叠的PNG图像

是否有可能使用jQuery的Draggable与重叠的PNG图像（而不是作为背景图像，因为它需要可打印）？我尝试过CSS样式“pointer-events：none”，但这在IE中不起作用。jQuery Draggable与重叠的PNG图像

<div id="overlap"> 
    <img src="overlapping.png" /> 
</div> 

<div id="draggable"> 
    <img src="photoToDrag.jpg" /> 
</div>

来源

2011-09-16 Brad

它是如何重叠的重叠？单独的HTML似乎表明这些是相邻的元素。他们如何定位？也就是说，他们是绝对的？或浮动？ – jimbojw

他们将使用position absolute和z-index来确保“overlap”div位于顶部。容器（未在上面的代码中示出）将使用相对位置。 – Brad

我们最后加入鼠标事件侦听器来覆盖DIV，然后通过这些事件的图像解决了这个问题。所以，任何时候单击PNG覆盖("#frame")时，该点击事件都会传递到底层图像("#imageid")。有了这个解决方案，我们可以让底层图像拖动而不会覆盖屏蔽它。

$(function() { 
    $("#imageid").draggable(); 

}); 

$(document).ready(function() { 
    // bind any events needed to the #frame element. 
    $("#frame").bind("click", function (event) { 
     proxy(event); 
    }); 

    $("#frame").bind("mousedown", function (event) { 
     proxy(event); 
    }); 

    $("#frame").bind("mouseup", function (event) { 
     proxy(event); 
    }); 

    $("#frame").bind("mousemove", function (event) { 
     proxy(event); 
    }); 
}); 

function proxy(event) { 
    $("#imageid").trigger(event); 
}

的HTML会设置这样的：

<div id="image"> 
    <img id="imageid" src="imageToDrag.jpg" style="position: relative; visibility: visible;"> 
</div> 
<div id="frame"> 
    <img src="overlay.png" style="position: absolute;top: 0;left: 0; height: 100px; width: 100px;"/> 
</div>

来源

2011-11-15 22:04:16 Brad

jQuery Draggable与重叠的PNG图像

回答

相关问题