不能拖動div內的圖像

我創建了一個div，想要拖動&拖放圖片...主要的問題是，如果它的作品無法在該div內拖動圖片。不能拖動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) { 

});

編碼拖到&降不工作，但阻力裏面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 
})

有沒有辦法來結合這兩種，使雙方的工作？

圖像被簡單插入爲。

來源

2015-06-16 EffGee

您的HTML代碼在哪裏？ – shreyansh

沒有想到這是必要的，因爲主要問題是「drageenter」阻止在div內拖動但在div內提供拖放。我想都:) – EffGee

請創建一個小提琴幫助更好地分析你的問題。 – VJS

這應該是你想要做什麼的例子：

<!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()};

來源

2015-06-16 09:55:23 Lain

不能拖動div內的圖像

回答

相關問題