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

问题

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

解决方案

自定义helper

// 卡片拖动-start
$(".drag-drop .card").each(function(){
	$(this).draggable({
		zIndex: 999,
		cursor: "move",
		revert: true,
		revertDuration: 0,
		helper: function(){
		var clone = $('
' + $(this).html() + '
');
		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;
}