setDragImage()
- DataTransfer 对象下面）
Set the image to be used for dragging if a custom one is desired. Most of the time, this would not be set, as a default image is created from the node that was dragged.
设置在拖动过程中显示的图片，大多数时候，我们不需要这是这个属性。默认的时候将使用被拖动的元素自身作为拖动状态的图片。
If the node is an HTML img element, an HTML canvas element or a XUL image element, the image data is used. Otherwise, image should be a visible node and the drag image will be created from this. If image is null, any custom drag image is cleared and the default is used instead.
拖动时展示的元素需要是可见元素。
The coordinates specify the offset into the image where the mouse cursor should be. To center the image, for instance, use values that are half the width and height of the image.
最后两个参数参数是图片显示相对于鼠标位置的偏移量。例如：如果需要图片在鼠标正中间，可以将值设置50%的图片宽和50%的图片高。（见下面的DEMO）
void setDragImage(
in Element image,
in long x,
in long y
);
Parameters
image
An element to use as the drag feedback image
一个将被展示为拖动背景的元素
x
Horizontal offset within the image.
图片的水平偏移量
y
Vertical offset within the image.
图片的垂直偏移量
原文地址
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#setDragImage.28.29
demo：
<!DOCTYPE html>
<html>
<head>
<title>拖动测试</title>
<meta charset="gbk">
<script src="jquery.js" type="text/javascript">
</script>
<style>
.myg {
cursor: move;
}
</style>
</head>
<body>
<ul>
<li data_val="1" draggable="true" class="myg">第一行</li>
</ul>
<script type="text/javascript">
$(function () {
$(".myg").bind("selectstart", function () {
return false;
});
$(".myg").bind("contextmenu", function () {
return false;
});
$(".myg").each(function () {
$(this).bind("dragstart", function (ev) {
var mouseEvent = ev.originalEvent;
mouseEvent.dataTransfer.setDragImage(document.getElementById("aaa"), 50, 50);
})
})
})
</script>
<img src="http://www.baidu.com/img/bd_logo1.png" id="aaa" style="width: 100px; height: 100px;">
</div>
</body>
</html>
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
