jQuery拖拽插件Draggabilly的使用方法jQuery拖拽插件Draggabilly的使用方法丹彤彤百家号draggabilly 可帮你轻松实现网页上各种元素的拖放操作。它支持IE8 +和多点触控。调用draggabilly.jsdraggabillly将添加类。#draggable被拖动的元素。实现代码html：css:javascript：本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。丹彤彤百家号最近更新：简介:辛勤的蜜蜂永没有时间的悲哀作者最新文章相关文章jQuery拖动拖拽插件draggabilly.pkgd.js
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
一款功能非常强大，基于draggabilly.pkgd.js制作的多种拖动效果的jQuery拖动拖拽插件draggabilly.pkgd.js。
&script type="text/javascript" src="dist/draggabilly.pkgd.min.js"&&/script&
&script type="text/javascript"&
$(function(){
$('#draggable1').draggabilly();
$('#draggable2').draggabilly({
$('.draggable').draggabilly({ containment: true });
$('#draggable3').draggabilly({grid: [100,100]});
$('#draggable4').draggabilly({ handle: '.handle' });
猜你喜欢...
jQuery拖动拖拽插件draggabilly.pkgd.js
亲，普通会员无权限下载，
升级VIP会员任意下载
（包月才10元）或联系QQ人工充值
亲，vip会员免费下载全站
充值方式： 或联系QQ人工充值jQuery UI 教程
jQuery UI 实例 - 拖动（Draggable）
允许使用鼠标移动元素。
如需了解更多有关 draggable 交互的细节，请查看 API 文档 。
在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 默认功能&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable { width: 150 height: 150 padding: 0.5 }
$(function() {
$( "#draggable" ).draggable();
&div id="draggable" class="ui-widget-content"&
&p&请拖动我！&/p&
当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过 scrollSensitivity 和 scrollSpeed 选项设置的。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 自动滚动&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable, #draggable2, #draggable3 { width: 100 height: 100 padding: 0.5 float: margin: 0 10px 10px 0; }
$(function() {
$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
&div id="draggable" class="ui-widget-content"&
&p&Scroll 设置为 true，默认设置&/p&
&div id="draggable2" class="ui-widget-content"&
&p&scrollSensitivity 设置为 100&/p&
&div id="draggable3" class="ui-widget-content"&
&p&scrollSpeed 设置为 100&/p&
&div style="height: 5000 width: 1"&&/div&
通过定义 draggable 区域的边界来约束每个 draggable 的运动。设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴，或者使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器，比如 'document.'。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 约束运动&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
.draggable { width: 90 height: 90 padding: 0.5 float: margin: 0 10px 10px 0; }
#draggable, #draggable2 { margin-bottom:20 }
#draggable { cursor: n- }
#draggable2 { cursor: e- }
#containment-wrapper { width: 95%; height:150 border:2px solid # padding: 10 }
h3 { clear: }
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable5" ).draggable({ containment: "parent" });
&h3&沿着轴约束运动：&/h3&
&div id="draggable" class="draggable ui-widget-content"&
&p&只能垂直拖拽&/p&
&div id="draggable2" class="draggable ui-widget-content"&
&p&只能水平拖拽&/p&
&h3&或者在另一个 DOM 元素中约束运动：&/h3&
&div id="containment-wrapper"&
&div id="draggable3" class="draggable ui-widget-content"&
&p&我被约束在盒子里&/p&
&div class="draggable ui-widget-content"&
&p id="draggable5" class="ui-widget-header"&我被约束在父元素内&/p&
当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable 的另一个位置（指定一个相对于 top、right、bottom、left 的像素值）。通过提供一个带有有效的 CSS 光标值的 cursor 选项，来自定义光标的外观。有效的 CSS 光标值包括：default、move、pointer、crosshair，等等。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 光标样式&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable, #draggable2, #draggable3 { width: 100 height: 100 padding: 0.5 float: margin: 0 10px 10px 0; }
$(function() {
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
&div id="draggable" class="ui-widget-content"&
&p&我总是在中间（相对于鼠标）&/p&
&div id="draggable2" class="ui-widget-content"&
&p&我的光标是在 left -5 和 top -5&/p&
&div id="draggable3" class="ui-widget-content"&
&p&我的光标位置只控制了 'bottom' 值&/p&
通过 delay 选项设置延迟开始拖拽的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 延迟开始&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable, #draggable2 { width: 120 height: 120 padding: 0.5 float: margin: 0 10px 10px 0; }
$(function() {
$( "#draggable" ).draggable({ distance: 20 });
$( "#draggable2" ).draggable({ delay: 1000 });
$( ".ui-draggable" ).disableSelection();
&div id="draggable" class="ui-widget-content"&
&p&只有把我拖拽了 20 像素后，拖拽才开始&/p&
&div id="draggable2" class="ui-widget-content"&
&p&不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始&/p&
draggable 上的 start、drag 和 stop 事件。拖拽开始时触发 start 事件，拖拽期间触发 drag 事件，拖拽停止时触发 stop 事件。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 事件&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable { width: 16 padding: 0 1 }
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
#draggable ul li span.ui-icon { float: }
#draggable ul li span.count { font-weight: }
$(function() {
var $start_counter = $( "#event-start" ),
$drag_counter = $( "#event-drag" ),
$stop_counter = $( "#event-stop" ),
counts = [ 0, 0, 0 ];
$( "#draggable" ).draggable({
start: function() {
counts[ 0 ]++;
updateCounterStatus( $start_counter, counts[ 0 ] );
drag: function() {
counts[ 1 ]++;
updateCounterStatus( $drag_counter, counts[ 1 ] );
stop: function() {
counts[ 2 ]++;
updateCounterStatus( $stop_counter, counts[ 2 ] );
function updateCounterStatus( $event_counter, new_count ) {
// 首先更新视觉状态...
if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
$event_counter.addClass( "ui-state-hover" )
.siblings().removeClass( "ui-state-hover" );
// ...然后更新数字
$( "span.count", $event_counter ).text( new_count );
&div id="draggable" class="ui-widget ui-widget-content"&
&p&请拖拽我，触发一连串的事件。&/p&
&ul class="ui-helper-reset"&
&li id="event-start" class="ui-state-default ui-corner-all"&&span class="ui-icon ui-icon-play"&&/span&"start" 被调用 &span class="count"&0&/span&x&/li&
&li id="event-drag" class="ui-state-default ui-corner-all"&&span class="ui-icon ui-icon-arrow-4"&&/span&"drag" 被调用 &span class="count"&0&/span&x&/li&
&li id="event-stop" class="ui-state-default ui-corner-all"&&span class="ui-icon ui-icon-stop"&&/span&"stop" 被调用 &span class="count"&0&/span&x&/li&
只有当光标在 draggable 上指定部分时才允许拖拽。使用 handle 选项来指定用于拖拽对象的元素（或元素组）的 jQuery 选择器。Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.
或者当光标在 draggable 内指定元素（或元素组）上时不允许拖拽。使用 handle 选项来指定取消拖拽功能的 jQuery 选择器。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - Handles&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable, #draggable2 { width: 100 height: 100 padding: 0.5 float: margin: 0 10px 10px 0; }
#draggable p { cursor: }
$(function() {
$( "#draggable" ).draggable({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
$( "div, p" ).disableSelection();
&div id="draggable" class="ui-widget-content"&
&p class="ui-widget-header"&您只可以在这个范围内拖拽我&/p&
&div id="draggable2" class="ui-widget-content"&
&p&您可以把我向四周拖拽&&/p&
&p class="ui-widget-header"&&但是您不可以在这个范围内拖拽我&/p&
当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 还原位置&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable, #draggable2 { width: 100 height: 100 padding: 0.5 float: margin: 0 10px 10px 0; }
$(function() {
$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
&div id="draggable" class="ui-widget-content"&
&p&还原&/p&
&div id="draggable2" class="ui-widget-content"&
&p&还原助手&/p&
对齐到元素或网格
对齐 draggable 到 DOM 元素的内部或外部边界。使用 snap、snapMode（inner, outer, both）和 snapTolerance（当调用对齐时，draggable 与元素之间的距离，以像素为单位）选项。
或者对齐 draggable 到网格。通过 grid 选项设置网格单元的尺寸（以像素为单位的高度或宽度）。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 对齐到元素或网格&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
.draggable { width: 90 height: 80 padding: 5 float: margin: 0 10px 10px 0; font-size: .9 }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
#snaptarget { height: 140 }
$(function() {
$( "#draggable" ).draggable({ snap: true });
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
&div id="snaptarget" class="ui-widget-header"&
&p&我是对齐目标&/p&
&br style="clear:both"&
&div id="draggable" class="draggable ui-widget-content"&
&p&默认（snap: true），对齐到所有其他的 draggable 元素&/p&
&div id="draggable2" class="draggable ui-widget-content"&
&p&我只对齐到大盒子&/p&
&div id="draggable3" class="draggable ui-widget-content"&
&p&我只对齐到大盒子的外边缘&/p&
&div id="draggable4" class="draggable ui-widget-content"&
&p&我对齐到一个 20 x 20 网格&/p&
&div id="draggable5" class="draggable ui-widget-content"&
&p&我对齐到一个 80 x 80 网格&/p&
给用户提供反馈，就像以助手方式拖拽对象一样。helper 选项接受值 'original'（用光标移动 draggable 对象），'clone'（用光标移动 draggable 的副本），或者一个返回 DOM 元素的函数（该元素在拖拽期间显示在光标附近）。通过 opacity 选项控制助手的透明度。
为了区别哪一个 draggable 正在被拖拽，让在运动中的 draggable 保持最前。如果正在拖拽，使用 zIndex 选项来设置助手的高度 z-index，或者使用 stack 选项来确保当停止拖拽时，最后一个被拖拽的项目总是出现在同组其他项目的上面。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） - 视觉反馈&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
#draggable, #draggable2, #draggable3, #set div { width: 90 height: 90 padding: 0.5 float: margin: 0 10px 10px 0; }
#draggable, #draggable2, #draggable3 { margin-bottom:20 }
#set { clear: float: width: 368 height: 120 }
p { clear: margin:0; padding:1em 0; }
$(function() {
$( "#draggable" ).draggable({ helper: "original" });
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
$( "#draggable3" ).draggable({
cursor: "move",
cursorAt: { top: -12, left: -20 },
helper: function( event ) {
return $( "&div class='ui-widget-header'&I'm a custom helper&/div&" );
$( "#set div" ).draggable({ stack: "#set div" });
&h3 class="docs"&助手：&/h3&
&div id="draggable" class="ui-widget-content"&
&p&原始的&/p&
&div id="draggable2" class="ui-widget-content"&
&p&半透明的克隆&/p&
&div id="draggable3" class="ui-widget-content"&
&p&自定义助手（与 cursorAt 结合）&/p&
&h3 class="docs"&堆叠：&/h3&
&div id="set"&
&div class="ui-widget-content"&
&p&我们是 draggables..&/p&
&div class="ui-widget-content"&
&p&..它的 z-index 是自动控制的..&/p&
&div class="ui-widget-content"&
&p&..带有 stack 选项。&/p&
jQuery UI Draggable + Sortable
Draggable 与 Sortable 的无缝交互。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 拖动（Draggable） + 排序（Sortable）&/title&
&link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="//code.jquery.com/jquery-1.9.1.js"&&/script&
&script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&
ul { list-style-type: margin: 0; padding: 0; margin-bottom: 10 }
li { margin: 5 padding: 5 width: 150 }
$(function() {
$( "#sortable" ).sortable({
revert: true
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
$( "ul, li" ).disableSelection();
&li id="draggable" class="ui-state-highlight"&请拖拽我&/li&
&ul id="sortable"&
&li class="ui-state-default"&Item 1&/li&
&li class="ui-state-default"&Item 2&/li&
&li class="ui-state-default"&Item 3&/li&
&li class="ui-state-default"&Item 4&/li&
&li class="ui-state-default"&Item 5&/li&
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
记住登录状态
重复输入密码&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/&
&title&拖拽拼图&/title&
margin: 0;
padding: 0;
/*overflow:*/
background: rgb(<span style="color:#, <span style="color:#, <span style="color:#);
width: <span style="color:#vmin;
height: <span style="color:#vmin;
background: rgb(<span style="color:#, <span style="color:#, <span style="color:#);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: auto;
.images ul li{
list-style: none;
width: <span style="color:#vmin;
height: <span style="color:#vmin;
margin: .4vmin <span style="color:# .4vmin;
float: left;
width: <span style="color:#vmin;
height: <span style="color:#vmin;
cursor: pointer;
.image img{
width: <span style="color:#vmin;
height: <span style="color:#vmin;
border-radius: 10px;
@keyframes rotate0 {
transform: rotateX(0deg)
transform: rotateX(-<span style="color:#deg)
@-webkit-keyframes rotate0 {
-webkit-transform: rotateX(0deg)
-webkit-transform: rotateX(-<span style="color:#deg)
@-ms-keyframes rotate0 {
-ms-transform: rotateX(0deg)
-ms-transform: rotateX(-<span style="color:#deg)
@keyframes rotate1 {
transform: rotateX(0deg)
transform: rotateX(<span style="color:#deg)
@-webkit-keyframes rotate1 {
-webkit-transform: rotateX(0deg)
-webkit-transform: rotateX(<span style="color:#deg)
@-ms-keyframes rotate0 {
-ms-transform: rotateX(0deg)
-ms-transform: rotateX(<span style="color:#deg)
@keyframes rotate2 {
transform: rotateY(0deg)
transform: rotateY(-<span style="color:#deg)
@-webkit-keyframes rotate2 {
-webkit-transform: rotateY(0deg)
-webkit-transform: rotateY(-<span style="color:#deg)
@-ms-keyframes rotate2 {
-ms-transform: rotateY(0deg)
-ms-transform: rotateY(-<span style="color:#deg)
@keyframes rotate3 {
transform: rotateY(0deg)
transform: rotateY(<span style="color:#deg)
@-webkit-keyframes rotate3 {
-webkit-transform: rotateY(0deg)
-webkit-transform: rotateY(<span style="color:#deg)
@-ms-keyframes rotate3 {
-ms-transform: rotateY(0deg)
-ms-transform: rotateY(<span style="color:#deg)
@keyframes rotate4 {
transform: rotateZ(0deg)
transform: rotateZ(-<span style="color:#deg)
@-webkit-keyframes rotate4 {
-webkit-transform: rotateZ(0deg)
-webkit-transform: rotateZ(-<span style="color:#deg)
@-ms-keyframes rotate4 {
-ms-transform: rotateZ(0deg)
-ms-transform: rotateZ(-<span style="color:#deg)
@keyframes rotate5 {
transform: rotateZ(0deg)
transform: rotateZ(<span style="color:#deg)
@-webkit-keyframes rotate5 {
-webkit-transform: rotateZ(0deg)
-webkit-transform: rotateZ(<span style="color:#deg)
@-ms-keyframes rotate5 {
-ms-transform: rotateZ(0deg)
-ms-transform: rotateZ(<span style="color:#deg)
display: block;
width: <span style="color:#vmin;
height: <span style="color:#vmin;
position: absolute;
z-index: <span style="color:#;
background: rgb(<span style="color:#, <span style="color:#, <span style="color:#);
font-size: 10vmin;
font-weight: <span style="color:#;
color: blue;
text-align: center;
/*水平居中*/
line-height: <span style="color:#vmin;
/*垂直居中*/
.standard{
display: none;
width: <span style="color:#vmin;
height: <span style="color:#vmin;
position: absolute;
z-index: <span style="color:#;
display: block;
margin: 2vmin auto;
width: 24vmin;
height: 10vmin;
border-radius: 1vmin;
font-size: 5vmin;
font-weight: <span style="color:#;
background: blue;
&script src="http://code.jquery.com/jquery-latest.js"&&/script&
$(document).ready(function(){
$("input").on("click",function(){
if ($(this).val() == "显示原图"){
$(this).val("继续")
$(this).val("显示原图")
if ( $(".standard").css("display") == "none" ){//如果当前隐藏
$('.standard').css({
"display" : "block"
$('.standard').css({
"display" : "none"
$("input").on("touchstart",function(e){
//触屏点击
e.preventDefault();
if ($(this).val() == "显示原图"){
$(this).val("继续")
$(this).val("显示原图")
if ( $(".standard").css("display") == "none" ){//如果当前隐藏
$('.standard').css({
"display" : "block"
$('.standard').css({
"display" : "none"
function ClientPosition(x,y){
function ImagePosition(left,top){
this.left =
this.top =
function RandomSort(oldArr,newArr){
//将数组随机排序的方法
this.oldArr = oldA
this.newArr = newA
this.getNewArray = function(){
if(this.oldArr.length == 1) {
this.newArr.push(this.oldArr[0]);
return this.newArr;
//递归退出
var random = Math.floor(Math.random() * this.oldArr.length);
this.newArr.push(this.oldArr[random]);
this.oldArr.splice(random,1);
return this.getNewArray(this.oldArr,this.newArr);//递归
var array = new RandomSort([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],[]);
//随机生成图片的排列顺序
var count=0;
var len = array.getNewArray().length;
$(".image").each(function(i){
this.init = function(){
this.parent = $(this).parent();
var img=new Image();
//创建图片
$(img).on("load",function(){
//图片加载，防止假死状态
$(".load").html( Math.round( (count + 1 ) / len * <span style="color:# ) + "%" );
if (count &= len-1){
$(".load").css({
"display" : "none"
img.src = "OOimages/"+array.getNewArray()[i]+".png";
$(this).append(img);
$(this).css({
"position" : "absolute",
"left" : this.parent.offset().left,
"top" : this.parent.offset().top,
"opacity" : 1
}).appendTo(".images").attr("data-index",i).attr("index",i);
//console.log(parent.offset().left)
this.drag();
this.drag = function(){
var isMouseDown = false;
var isMove = false;
$(this).on("mousedown",function(event){
var e = event || window.event;
e.preventDefault();
isMouseDown = true;
var _this=this;
_this.startClientPosition = new ClientPosition(e.clientX, e.clientY);
_this.startImagePosition = new ImagePosition($(this).offset().left,$(this).offset().top);
$(_this).css({
"-webkit-animation" : "none",
"-ms-animation" : "none",
"animation" : "none",
"-webkit-transform" : "none",
"-ms-transform" : "none",
"transform" : "scale(1.2)",
"opacity" :.7,
"z-index" : <span style="color:#
//console.log(startImagePosition)
$(document).on("mousemove",function(event){
var e = event || window.event;
e.preventDefault();
if (!isMouseDown){
return false }
isMove = true;
_this.newClientPosition = new ClientPosition(e.clientX, e.clientY);
$(_this).css({
"left" : _this.newClientPosition.x - _this.startClientPosition.x + _this.startImagePosition.left,
"top" : _this.newClientPosition.y - _this.startClientPosition.y + _this.startImagePosition.top
$(document).on("mouseup",function(event){
var e = event || window.event;
e.preventDefault();
if (!isMouseDown) { return false }
isMouseDown = false;
isMove && _this.collisionCheck();
//只有当鼠标移动过才进行碰撞检测
_this.move(function () {
$(_this).css({
"-webkit-animation" : "rotate"+ ~~(Math.random() * 6)+" .5s",
"-ms-animation" : "rotate"+ ~~(Math.random() * 6)+" .5s",
"animation" : "rotate"+ ~~(Math.random() * 6)+" .5s",
"-webkit-transform" : "scale(1.0)",
"-ms-transform" : "scale(1.0)",
"transform" : "scale(1.0)",
"opacity": 1,
"z-index": 0
$(this).on("touchstart",function(e){
e.preventDefault();
isMouseDown = true;
var _this=this;
_this.startClientPosition = new ClientPosition(e.originalEvent.targetTouches[0].pageX, e.originalEvent.targetTouches[0].pageY);
_this.startImagePosition = new ImagePosition($(this).offset().left,$(this).offset().top);
$(_this).css({
"-webkit-animation" : "none",
"-ms-animation" : "none",
"animation" : "none",
"-webkit-transform" : "none",
"-ms-transform" : "none",
"transform" : "scale(1.2)",
"opacity" :.7,
"z-index" : <span style="color:#
//console.log(startImagePosition)
$(document).on("touchmove",function(e){
e.preventDefault();
if (!isMouseDown){
return false }
isMove = true;
_this.newClientPosition = new ClientPosition(e.originalEvent.targetTouches[0].pageX, e.originalEvent.targetTouches[0].pageY);
$(_this).css({
"left" : _this.newClientPosition.x - _this.startClientPosition.x + _this.startImagePosition.left,
"top" : _this.newClientPosition.y - _this.startClientPosition.y + _this.startImagePosition.top
$(document).on("touchend",function(e){
e.preventDefault();
if (!isMouseDown){
return false }
isMouseDown = false;
isMove && _this.collisionCheck();
_this.move(function(){
$(_this).css({
"-webkit-animation" : "rotate"+ ~~(Math.random() * 6)+" .5s",
"-ms-animation" : "rotate"+ ~~(Math.random() * 6)+" .5s",
"animation" : "rotate"+ ~~(Math.random() * 6)+" .5s",
"-webkit-transform" : "scale(1.0)",
"-ms-transform" : "scale(1.0)",
"transform" : "scale(1.0)",
"opacity": 1,
"z-index": 0
this.move = function(callback){
//被拖拽的图片回到父级元素的位置
$(this).animate({
top : this.parent.offset().top,
left : this.parent.offset().left
},<span style="color:#,function(){
callback && callback()
this.collisionCheck = function(){
//碰撞检测
var _this = this;
$(this).siblings(".image").each(function(){
var target = this;
if (_this.newClientPosition.x & this.parent.offset().left && _this.newClientPosition.y & this.parent.offset().top && _this.newClientPosition.x & (this.parent.offset().left + this.parent.width()) && _this.newClientPosition.y & (this.parent.offset().top + this.parent.height())){
target.exchange(_this);
//console.log(11)
this.exchange = function(select){
var save = this.parent;
this.parent = select.parent;
select.parent = save;
this.move();
$(select).attr("data-index",select.parent.index());
$(this).attr("data-index",this.parent.index());
//console.log($(this).index())
this.init();
&div class="images"&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&li&&div class="image"&&/div&&/li&
&div class="load"&0%&/div&
&img src="OOimages/xiong.png"
class="standard"/&
&input type="button" value="显示原图"/&
android 移动拼图效果实现
h5简单的拖拽排序,
移动端列表长按后上下拖动进行排序
jquery mobile开发手机webapp页面（三）拖动排序插件Sortable
移动端实现排序拖动
html5移动端：元素拖动/触控touch（js）(jquery)
移动端拖拽的实现效果
没有更多推荐了，