jquery实现图片拖动

lxf 2022年03月21日编程语言 325 0

目的：实现图片的拖动功能

最近项目中需要给图片加一个拖动功能，原来可以用jquery提供的sortable来实现，在此记录一下。

1、引入jqueryui的js：

<!-- jquery-ui --> 
<script type="text/javascript" src="jquery-ui-1.10.3.min.js"></script>

2、html代码：

<ul class="specImg"> 
	<li class="upload-thumb" picid="4094" style="">      
		<img src="image1.jpg" />   
	</li> 
	<li class="upload-thumb" picid="4095" style="">          
		<img src="image2.jpg" />   
	</li> 
</ul>

3、js：

$(".specImg").sortable({ 
	revert: false,//revert:sortable 项目是否使用一个流畅的动画还原到它的新位置。 
	items: "li:not(.ui-state-disabled)"//items:指定元素内的哪一个项目应是 sortable。 
}).disableSelection();//disableSelection:元素集合内的文本内容(因为要实现拖动，所以要让文字不能选择)