基于 Sortable.js 的拖拽放置功能 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>1</title>
	<meta name="keywords" content="1"/>
	<meta name="description" content="1"/>
	<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
</head>
<body>
	<div class="container" style="height: 520px">
		<div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
			<ul id="foo" class="block__list block__list_words">
				<li>бегемот</li>
				<li>корм</li>
				<li>антон</li>
				<li>сало</li>
				<li>железосталь</li>
				<li>валик</li>
				<li>кровать</li>
				<li>краб</li>
			</ul>
		</div>
		<div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
			<ul id="foo1" class="block__list block__list_words">
				<li>бегемот</li>
				<li>корм</li>
				<li>антон</li>
				<li>сало</li>
				<li>железосталь</li>
				<li>валик</li>
				<li>кровать</li>
				<li>краб</li>
			</ul>
		</div>
	</div>
	<script src="Sortable.js"></script>
	<script>
          Sortable.create(document.getElementById('foo'), {
			group:'group_name',//相同组名的情况下才可以跨列表拖动
               animation: 150, //动画参数
               onAdd: function (evt) {   //拖拽时候添加有新的节点的时候发生该事件
                    console.log('onAdd.foo:', [evt.item, evt.from]);
               },
               onUpdate: function (evt) {  //拖拽更新节点位置发生该事件
                    console.log('onUpdate.foo:', [evt.item, evt.from]);
               },
               onRemove: function (evt) {   //删除拖拽节点的时候促发该事件
                    console.log('onRemove.foo:', [evt.item, evt.from]);
               },
               onStart: function (evt) {  //开始拖拽出发该函数
                    console.log('onStart.foo:', [evt.item, evt.from]);
               },
               onSort: function (evt) {  //发生排序发生该事件
                    console.log('onSort.foo:', [evt.item, evt.from]);
               },
               onEnd: function (evt) { //拖拽完毕之后发生该事件
                    console.log('onEnd.foo:', [evt.item, evt.from]);
               }
          });
		   Sortable.create(document.getElementById('foo1'), {
		   group:'group_name',//相同组名的情况下才可以跨列表拖动
               animation: 150, //动画参数
               onAdd: function (evt) {   //拖拽时候添加有新的节点的时候发生该事件
                    console.log('onAdd.foo:', [evt.item, evt.from]);
               },
               onUpdate: function (evt) {  //拖拽更新节点位置发生该事件
                    console.log('onUpdate.foo:', [evt.item, evt.from]);
               },
               onRemove: function (evt) {   //删除拖拽节点的时候促发该事件
                    console.log('onRemove.foo:', [evt.item, evt.from]);
               },
               onStart: function (evt) {  //开始拖拽出发该函数
                    console.log('onStart.foo:', [evt.item, evt.from]);
               },
               onSort: function (evt) {  //发生排序发生该事件
                    console.log('onSort.foo:', [evt.item, evt.from]);
               },
               onEnd: function (evt) { //拖拽完毕之后发生该事件
                    console.log('onEnd.foo:', [evt.item, evt.from]);
               }
          });
     </script>
</body>
</html>

　　

posted @ 2020-10-30 03:00  学画人生  阅读(566)  评论(0)    收藏  举报