<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 500px;
height: 500px;
background-color: pink;
}
.item {
margin: 20px;
width: 100px;
height: 100px;
background-color: #2D93CA;
color: #FFF9EC;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="item">1</div>
<div class="item">2</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//拖拽
$('.item').draggable({
helper: "clone",
cursor: "move"
});
//释放后
$('#box').droppable({
drop: function(event, ui) {
var source = ui.draggable.clone();
$(this).append(source);
}
});
</script>
</body>
</html>
api
$(".block").draggable({
// axis:'x',//约束拖动的动作只能在水平(x轴)或垂直(y轴)上执行。可选值: "x", "y"。
cancle:'.outer',
containment:'#contain',//只能在指定元素内拖动
cursor:'crosshair',//指定在做拖拽动作时，鼠标的CSS样式。
cursorAt:{left:20,top:20},//设置拖动帮手相对于鼠标光标的偏移量。坐标可被指定为一个散列 使用的组合中的一个或两个键：{ top, left, right, bottom } 。
delay:0,//当鼠标按下后，指定时延迟间后才开始激活拖拽动作（单位：毫秒）。此选项可用来阻止当点击一个元素时可能发生的非期望拖动行为。默认为0
disabled:false,//如果该值设置为true，拖动特效将被禁用。默认值为false
distance:0,//当鼠标点下后，只有移动指定像素后才开始激活拖拽动作，单位为像素。
grid:[5,5],//拖拽元素时，只能以指定大小的方格进行拖动。数组形式为[ x, y ]。
handle:'',//当参数值为true时,只有在特定的元素上触发鼠标按下事件时，才可以拖动。只有被拖到元素的子元素才可以应用该参数。
/*helper:"clone",允许一个元素被用来进行拖动。
//支持多种类型
--String:如果值设置为"clone", 那么该元素将会被复制，并且被复制的元素将被拖动。
--Function: 当拖动时，函数将返回一个DOM元素以供使用。*/
opacity:.5,//当拖动时，拖动助手元素的不透明度。
refreshPositions:false,//如果设置为true， 所有的可拖动位置在每次鼠标移动时都会被计算。
revert:true,//当拖动停止时，元素是否要被重置到它的初始位置。
/*
* Boolean: 如果设置为true，当拖动停止时，元素位置将被重置。
* String: 如果设置为"invalid", 重置仅当拖动没有被放置于一个可放置的对象时才会发生。如果设置为"valid", 情况则相反。
* */
revertDuration:500,//动画重置时间, 单位为微秒。如果revert选项设置为false，则忽略动画重置时间，默认值为500
scroll:true,//如果设置为true, 当拖动时，div盒模型将自动翻滚。注：拖动超出浏览器的可视区域才会出现滚动条
scrollSensitivity:20,//离开可视区域边缘多少距离开始滚动。距离是相对指针进行计算的，而不是被拖到元素本身。如果scroll 选项设置为false，则不滚动。默认值：20
scrollSpeed:20,//当鼠标指针的值小于scrollSensitivity的值时，窗口滚动的速度。如果scroll选项设置为false，则该参数无效。默认值：20
snap:true,//决定一个元素是否应该吸附到其它元素上。
/* --Boolean: 当设置为 true时, 元素将可以吸附到所有其它可拖动元素上。
* --Selecter: 确定被吸附元素。
* */
snapMode:"both",//决定可拖动元素将要吸附到哪个元素的边缘。如果snap选项设置为false，则忽略该参数。 可选值: "inner", "outer", "both".
snapTolerance:20,//当距离可吸附元素多远时，触发吸附事件。如果snap选项设置为false，则忽略该参数。默认值：20
stack:false,//控制由选择器所触发的一系列元素的z-index值, 总是将当前被拖动对象至于最前。对于像窗口管理这样的应用来说，非常有用。
zIndex:99,//当被拖动时，拖动助手的Z-index值。默认值：false
create:function(event, ui ){},//当一般拖动组件被创建时触发。
drag:function(event,ui){},//当鼠标在拖动过程中移动时触发。
start:function(event,ui){},//当拖动开始时触发。
stop:function(event,ui){}//当拖动停止时触发。
});
$(".block").draggable("option","cursor","pointer");
$(".inner").draggable({scroll:true});