Question

我创建了一个想要拖动的div。丢失图片...主要问题是，如果它工作，图像不能被拖入该div。

代码工作阻力＆amp;降

 $('div[role="textbox"]').on(
    'dragover',
    function (e) {
        e.preventDefault();
        e.stopPropagation();
    }
        );
    $('div[role="textbox"]').on(
        'dragenter',
        function (e) {
            e.preventDefault();
            e.stopPropagation();
        }
    );


    $('div[role="textbox"]').on(
    'drop',
    function (e) {

});

代码拖动＆amp;丢弃不工作但拖入div工作

//$('div[role="textbox"]').on(
    //'dragover',
    //function (e) {
    //    e.preventDefault();
    //    e.stopPropagation();
    //}
    //    );
    //$('div[role="textbox"]').on(
    //    'dragenter',
    //    function (e) {
    //        e.preventDefault();
    //        e.stopPropagation();
    //    }
    //);


    $('div[role="textbox"]').on(
    'drop',
    function (e) {
//logic
})

有没有办法将这两者结合起来使两者都有效？

图像只是作为一个插入。

Answer 1

这应该是您想要做的一个例子：

<!DOCTYPE HTML>
    <html>
        <head>
            <script>
                function allowDrop(ev){ev.preventDefault()}

                function drag(ev){ev.dataTransfer.setData("text", ev.target.id)}

                function drop(ev){
                    ev.preventDefault();
                    var data = ev.dataTransfer.getData("text");
                    ev.target.appendChild(document.getElementById(data));
                }
            </script>
        </head>

        <body>
            <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
        </body>
    </html>

来源： http://www.w3schools.com/html/html5_draganddrop.asp

另外，根据我的跨浏览器体验，要在div中拖放嵌套元素，需要取消父div上的所有拖动事件。

element.ondragenter = function(event){event.preventDefault()};
element.ondragleave = function(event){event.preventDefault()};
element.ondragover = function(event){event.preventDefault()};

无法在div中拖动图像

1 个答案: