Question

我是前端编程新手，并尝试使用HTML5拖放功能。要拖动的对象是一个引导程序div.panel，它可以很好地完成它的工作。但是，在拖动对象时，我想使用SetDragImage函数显示自定义图像。我已经按照Mozilla Developer Network中的描述精确地使用了这个函数，但它仍然不起作用 - 拖动对象时会显示默认的空白矩形。

下面是拖放事件的JavaScript，这里是JSFiddle。

<script type="text/javascript">
function drag(ev){
    //var style = window.getComputedStyle(ev.target, null);
    var ss  = (parseInt($(ev.target).position().left,10) - ev.clientX) + ',' + (parseInt($(ev.target).position().top,10) - ev.clientY);
    ev.dataTransfer.setData("text/plain", ss);

    ev.dataTransfer.setDragImage(document.getElementById("draggit"), 0, 0);
    console.log("drag:target", $(ev.target).position().left + "," + $(ev.target).position().top);
    console.log("drag:offset", ss);
}

function drop(ev) {
    //console.log("drop:" +  $(ev.target).position().left + ","  + $(ev.target).position().top);
    //console.log("drop:" +  ev.clientX + ","  + ev.clientY);
    var offset = ev.dataTransfer.getData("text/plain");
    var npos = offset.split(",");
    console.log("drop_clientpos:" +  ev.clientX + "," + ev.clientY);
    console.log("drop_newpos:" +  (ev.clientX + parseInt(npos[0])) + "," + (ev.clientY + parseInt(npos[1])));
    document.getElementById("dragme").style.left = (ev.clientX + parseInt(npos[0])) + "px";
    document.getElementById("dragme").style.top = (ev.clientY + parseInt(npos[1])) + "px";

    ev.preventDefault();
    return false;
}

function dragOver(ev) {

    ev.preventDefault();
    return false;
}
</script>

HTML5拖放：SetDragImage不起作用

0 个答案: