Question

我正在使用javascript和html5将图片拖到 div 上。

后来进行图像大小调整。

但问题是即使我使用溢出：隐藏和溢出的任何属性，图像来自div。如何让它成为div本身？

<script>




function allowDrop(ev) {

        ev.preventDefault();

    }

    function drag(ev) {

        ev.dataTransfer.setData("application/json", JSON.stringify([ev.target.id,(ev.offsetX || ev.clientX - $(ev.target).offset().left),(ev.offsetY || ev.clientY - $(ev.target).offset().top)]));

    }

    function drop(ev) {

        ev.preventDefault();

        var data = JSON.parse(ev.dataTransfer.getData("application/json"));

        ev.target.appendChild(document.getElementById(data[0]));

        //window.alert( ev.clientX + ',' + ev.clientY);

        document.getElementById("img").style.left = ev.clientX - data[1] + 'px';

        document.getElementById("img").style.top = ev.clientY - data[2] + 'px';

         document.getElementById("img").addEventListener('mousedown', initDrag, false);

        return false;   

     }

     var startX, startY, startWidth, startHeight;

        function initDrag(e) {  

            startX = e.clientX;

            startY = e.clientY; 

             startWidth = parseInt(document.defaultView.getComputedStyle(document.getElementById("img")).width, 10);

            startHeight = parseInt(document.defaultView.getComputedStyle(document.getElementById("img")).height, 10);

            document.documentElement.addEventListener('mousemove', doDrag, false);

            document.documentElement.addEventListener('mouseup', stopDrag, false);

        }

        function doDrag(e) { 

         document.getElementById("drag2").style.width = (startWidth + e.clientX - startX) + 'px';

            document.getElementById("drag2").style.height = (startHeight + e.clientY - startY) + 'px';


         }

        function stopDrag(e) {

            document.documentElement.removeEventListener('mousemove', doDrag, false);

             document.documentElement.removeEventListener('mouseup', stopDrag, false);

        }
</script>

<body>



<div id="divid" ondrop="drop(event)" ondragover="allowDrop(event)">



    </div>

     <img src="test.jpg" id="img" draggable="true" ondragstart="drag(event)"></img>

</body>

<style>

#divid {width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;overflow:auto;}

    #img {width:50px;height:50px;padding:10px;position: absolute;}
</style>

Answer 1

如果您指的是ID为'divid'的div，则您的标记不在div中。因此，如果您希望div的溢出设置应用于图像，则图像元素必须位于标记之前。像：

<div id="divid" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="test.jpg" id="img" draggable="true" ondragstart="drag(event)"></img>
</div>

编辑：好的，所以我误解了我之前的答案。我出于后人的缘故离开了它。经过一些测试，我发现解决方案非常简单。您需要将div的样式设置为使用position：relative。否则，绝对定位的图像将忽略div的溢出设置。工作小提琴：https://jsfiddle.net/q9etbdxg/。拖动测试图像使其跨越div的边缘，您应该看到滚动条出现。

在div中溢出图像拖放

1 个答案: