Question

我正在尝试实施拖放方案。

我遇到的一个问题是我需要在外部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的边框为红色。

有什么建议吗？感谢。

Answer 1

完成此示例

＆＃13;

<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>

＆＃13;

Answer 2

您的容器上只有一个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;
}

Answer 3

谢谢大家，

最终，我通过检查事件坐标是否在外部div中来解决它。

拖放到多个元素问题

3 个答案: