jQuery UI在里面拖动元素

我试图拖动里面的元素，但它不工作。这里是我的代码：jQuery UI在里面拖动元素

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

的问题是，李里面的元素“不能”被抓住了，然后拖到拖放区。如果我将div取出来，代码完美地工作。有没有人遇到过这样的事情？

我只是不想拖动整个李。

来源

2016-01-21 Marrone

变化$('dragme')到$('.dragme')

（我没有实际测试过这是一个解决方案，它可能不是实际上的问题）

来源

2016-01-21 16:53:25

嘿约瑟夫，谢谢你的帮助。那个。让我:-) – Marrone

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

来源

2016-01-21 16:52:58 ryan0319

瑞安，感谢您的帮助！你的建议也有效。 :-) – Marrone

jQuery UI在里面拖动元素

回答

相关问题