问题
jqueryui 在拖拽的时候如果在一个容器内拖拽,即不拖拽到父元素的外面的时候是没有问题的,但是如果想把某个元素拖到父元素的外面,就会发现一旦拖拽到容器外面就会被隐藏。
解决方案
自定义helper
// 卡片拖动-start
$(".drag-drop .card").each(function(){
$(this).draggable({
zIndex: 999,
cursor: "move",
revert: true,
revertDuration: 0,
helper: function(){
var clone = $('<div class="ui-clone">' + $(this).html() + '</div>');
clone.appendTo('body');
return clone;
},
containment: 'body',
appendTo: 'body'
});
});
//卡片拖动-end
这样会把拖拽的元素的整体html都添加到ui-clone下面,所以我们在把原来元素(user-event)的css样式加到ui-clone上面
.card-chunk .card,.ui-clone{
width: 200px;
height: 100px;
background: #FFFFFF;
box-shadow: 0 4px 6px 0 rgba(201,201,201,0.50);
border-radius: 6px;
padding: 5px;
margin-bottom: 10px;
}