如何解决jquery ui拖拽时拖到容器外会被覆盖问题

最新推荐文章于 2023-03-10 16:26:55 发布

原创最新推荐文章于 2023-03-10 16:26:55 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ui #jquery #拖拽 #问题

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

前端-问题集锦

2 篇文章

订阅专栏

本文介绍了在使用jQuery UI拖拽功能时，遇到元素拖出父容器会被隐藏的问题，提供了一个通过自定义helper来解决此问题的方法，确保元素在拖动到容器外部时仍然可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

jqueryui 在拖拽的时候如果在一个容器内拖拽，即不拖拽到父元素的外面的时候是没有问题的，但是如果想把某个元素拖到父元素的外面，就会发现一旦拖拽到容器外面就会被隐藏。

解决方案

自定义helper

$("#userViewTaskGrid .user-event").each(function(){
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0,
helper: function(){
var clone = $('<div class="ui-clone">' + $(this).html() + '</div>');
clone.appendTo('body'); 
return clone;
},
containment: 'body', 
appendTo: 'body'
});
});

这样会把拖拽的元素的整体html都添加到ui-clone下面，所以我们在把原来元素(user-event)的css样式加到ui-clone上面

//下面是原来元素的样式

.ui-clone
{
width: 200px;
background: rgb(133, 203, 116);
}

effevo技术团队出品（https://effevo.com）
这里写图片描述