Question

我正在尝试在像facebook封面一样的div中移动图像，但是图像标记时，它无法顺利移动。当我把这个图像放在像背景图像这样的div中时，它正在工作我的js代码是..

var draggable = function(element) {
    element.addEventListener('mousedown', function(e) {
        e.stopPropagation();
        if (e.target != element)
            return;
        var offsetX = e.pageX - element.offsetLeft;
        var offsetY = e.pageY - element.offsetTop;
        function move(e) {
            var ele = document.getElementById('ele');
            var width = 400-ele.clientWidth;
            var height = 400-ele.clientHeight;
            element.style.left = (e.pageX - offsetX) + 'px';
            element.style.top = (e.pageY - offsetY) + 'px';
        }
        function stop(e) {
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', stop);
        }
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', stop);
    });
}

function init() {
    var ele = document.getElementById('ele');
    draggable(ele);
}

我的html代码无法正常工作..

<body onload="init();">
    <div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
        <img src="Desert.jpg" id="ele" style="position:absolute;"></img>
    </div>
</body>

并且此代码正在运行..

<body onload="init();">
    <div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
        <div id="ele" style="width:100%; height:100%; background-color: gray; position:absolute; background-image:url( 'Desert.jpg' );"></div> 
    </div>
</body>

Answer 1

你可以参考这个问题，它处理拖动图像的相同想法，虽然问题略有不同。从问题中查看他/她的JSFiddle。

Check it out here!

Answer 2

<img>是一个自动结束标记。您不需要</img>，因为它无效。删除它，它应该工作正常。取决于您应使用的doctype：

<强> HTML5

<img src="Desert.jpg" id="ele" style="position:absolute;">

XHTML （请注意标记末尾的/）

<img src="Desert.jpg" id="ele" style="position:absolute;" />

如何在div中制作可拖动的图像？

2 个答案: