Question

我试图拖动li里面的元素，但它不起作用。这是我的代码：

 <script type="text/javascript">
    $( document ).ready(function() {

      $('dragme').draggable({
        helper: 'clone',
        revert: 'invalid',
        cursor: 'move',
        appendTo: 'body'
      });

      $('#drop').droppable({
        drop: function(event, ui) {
          newItem = ui.draggable.clone();

          newItem.removeClass('ui-draggable');
          newItem.removeClass('ui-draggable-handle');

          newItemId = newItem.attr('id')+'_clone';


          newItem.attr('id',newItemId);
          newItem.attr('name',newItemId);

          if (!newItem.hasClass('cloned')) {
            $('#drop').append(newItem);  
          }

      newItem.addClass('cloned');
      newItem.draggable({
        containment: "parent",
        helper: "original"
      });

    }
  });

});

这是html代码：

    <p>Drag them</p>
    <div id="drag" style="border: solid 1px red; height: 200px; width: 500px">
      <ul>
        <li>
          <div id="item1" class="dragme" style="background-color: #e74c3c; color: #fff; height: 50px; width: 50px">
            <p>Item 1</p>
          </div>          
        </li>
        <li>
          <div id="item2" class="dragme" style="background-color: #2980b9;color: #fff;  height: 50px; width: 50px">
            <p>Item 2</p>
          </div>
        </li>        
      </ul>
    </div>
    <br>
    <div id="drop" style="border: solid 1px black; height: 200px; width: 500px">
</div>

问题是li＆＃34;中的元素可以＆＃39;＃34;被抓住然后拖到掉落区。如果我从div中取出div，代码就可以完美运行。有没有人遇到这样的事情？

我只是不想拖动整个李。

Answer 1

使用pointer-events: none; CSS类来防止div抓取鼠标事件。

Answer 2

将$('dragme')更改为$('.dragme')

（我实际上没有将此作为解决方案进行测试，实际上可能不是问题）

里面的jQuery UI拖动元素

2 个答案: