拖放到多個元素問題

我遇到的問題是我需要在外部div上放置元素，但事件在內部div上觸發。

這裏是爲了證明我的問題codepen：

<html> 
    <head> 
    <style> 
     .dropDiv { 
     height: 100px; 
     width: 200px; 
     border: 1px solid black; 
     } 

     .innerDiv { 
     height: 100px; 
     width: 100px; 
     border-right: 1px solid black; 
     } 


     .drag { 
     border: 1px solid green; 
     } 

     .drop { 
     border: 1px solid red; 
     } 
    </style> 
    </head> 
    <body> 
    <span id="text" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)" class="">Drag Text</span> 

    <br> 
    <br> 

    To Here: 
    <div class="dropDiv" ondrop="drop(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)" ondragover="allowDrop(event)"> 
     <div class="innerDiv"></div> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script> 
     function allowDrop(ev) { 
      ev.preventDefault(); 
     } 
     function drag(ev) { 
      $(ev.target).addClass('drag'); 
      ev.dataTransfer.setData('text', ev.target.id); 
     } 
     function dragenter(ev) { 
      $(ev.target).addClass('drop'); 
     } 
     function dragleave(ev) { 
      $(ev.target).removeClass('drop'); 
     } 
     function dragend(ev) { 
      $(ev.target).removeClass('drag'); 
     } 
     function drop(ev) { 
      ev.preventDefault(); 
      var data = ev.dataTransfer.getData('text'); 
      ev.target.appendChild(document.getElementById(data)); 
      $(ev.target).removeClass('drop'); 
     } 
    </script> 
    </body> 
</html>

我需要，只要拖動的元素是在外層div的邊框爲紅色。但是當鼠標在內部div上時，只有內部div的邊框是紅色的。

有什麼建議嗎？謝謝。

來源

2015-10-13 Ozzz123

你只是你的容器上的一個div。取出容器，並嘗試

<div class="innerDiv" ondrop="drop(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)" ondragover="allowDrop(event)"></div> 
<div class="innerDiv" ondrop="drop(event)" ondragenter="dragenter(event)" ondragleave="dragleave(event)" ondragover="allowDrop(event)"></div> 

.innerDiv { 
    height: 100px; 
    width: 100px; 
    border: 1px solid; 
    float:left; 
}

來源

2015-10-13 14:18:05

這只是一個演示..在我的真實應用程序中，這是不可能的 – Ozzz123

通過這個例子

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Droppable - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <style> 
 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
 
    </style> 
 
    <script> 
 
    $(function() { 
 
    $("#draggable").draggable(); 
 
    $("#droppable").droppable({ 
 
     drop: function(event, ui) { 
 
     $(this) 
 
      .addClass("ui-state-highlight") 
 
      .find("p") 
 
      .html("Dropped!"); 
 
     } 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me to my target</p> 
 
</div> 
 
    
 
<div id="droppable" class="ui-widget-header"> 
 
    <p>Drop here</p> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

來源

2015-10-13 14:23:02 Rakshith

如果我只有一個div放棄它的工作，但我有他們的層次結構... – Ozzz123

而不是id使用名稱或類...它會工作 – Rakshith

謝謝大家，

最終，我解決它通過如果事件COORDS檢查在外部分區。

來源

2015-10-16 09:53:37 Ozzz123

拖放到多個元素問題

回答

相關問題