引言：大家久等了厦取，對不住了。最近經常出差，項目很趕啊洼怔，寶寶心很累/(ㄒoㄒ)/~~。
參考：http://www.cnblogs.com/lrzw32/p/4696655.html
jquery 插件化##
起始插件化：
; (function($, window, undefined) {
$.fn.drag = function(options) {
drag(this)
}
})(jquery, window, undefined);
其他的代碼類似前篇拖拽基礎篇http://www.reibang.com/p/feca77ec252e左驾。只是需要將一些dom操作改為jquery操作镣隶。詳細代碼：
; (function($, window, undefined) {
//拖拽元素
function DragElement(node) {
this.target = node;
node.onselectstart = function() {
return false;//防止文字選中
}
}
DragElement.prototype = {
constructor: DragElement,
setXY: function(x, y) {
this.x = parseInt(x) || 0;
this.y = parseInt(y) || 0;
return this;
},
setTargetCss: function(css) {
$(this.target).css(css);
return this;
}
}
//鼠標
function Mouse() {
this.x = 0;
this.y = 0;
}
Mouse.prototype.setXY = function(x, y) {
this.x = parseInt(x);
this.y = parseInt(y);
}
//拖拽配置
var draggableConfig = {
zIndex:10,
dragElement: null,
mouse: new Mouse()
};
var draggableStyle = {
dragging: {
cursor: 'move'
},
defaults: {
cursor: 'auto'
}
}
var $document = $(document);
function drag($ele) {
var $dragNode = $ele;
$dragNode.on({
'mousedown': function(event) {
var dragElement = draggableConfig.dragElement = new DragElement($ele.get(0));
draggableConfig.mouse.setXY(event.clientX, event.clientY);
draggableConfig.dragElement.setXY(dragElement.target.style.left, dragElement.target.style.top)
.setTargetCss({
'zIndex': draggableConfig.zIndex ++,
'position': 'relative'
});
},
'mouseover': function() {
$(this).css(draggableStyle.dragging);
},
'mouseout':function() {
$(this).css(draggableStyle.defaults);
}
})
}
function move(event) {
if(draggableConfig.dragElement) {
var mouse = draggableConfig.mouse,
dragElement = draggableConfig.dragElement;
dragElement.setTargetCss({
'left': parseInt(event.clientX - mouse.x + dragElement.x) + 'px',
'top': parseInt(event.clientY - mouse.y + dragElement.y) + 'px'
});
$document.off('mousemove', move);
setTimeout(function() {
$document.on('mousemove', move);
}, 25);
}
}
$document.on({
"mousemove": move,
'mouseup': function() {
draggableConfig.dragElement = null;
}
});
$.fn.drag = function(options) {
drag(this)
}
})(jQuery, window, undefined);
拖拽引用：
window.onload = function() {
var dragObj = $("#drag");
dragObj.drag();
}
jQuery拖拽插件 —— sortable##
sortable.js###
sortable.js:是一個獨立的JS插件极谊，不需要jquery，Sortable非常輕量安岂，壓縮后只有2KB轻猖，采用的是html5拖拽。https://github.com/RubaXa/Sortable
有關html5拖拽請期待 拖拽三 O(∩_∩)O哈哈~域那。
簡單例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="NARUTOne">
<title>Sortable拖拽</title>
<script type="text/javascript" src="./lib/Sortable.js"></script>
<style media="screen">
div {
width: 800px;
padding: 50px;
border: 1px solid #ededed;
margin: 100px auto;
}
div::after {
content: '';
display: table;
clear: both;
}
p {
width: 420px;
}
span {
width: 120px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
height:30px;
/*border: 1px solid red;*/
background-color: #26a4fe;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="">
<p id="sortleft" class='item'>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</p>
</div>
</body>
<script type="text/javascript">
var el = document.getElementById('sortleft');
new Sortable(el,{
group: "name"
});
</script>
</html>
當然還有許多方法和配置咙边，這就需要大神們自己看看文檔了O(∩_∩)O哈哈,小渣我就不說了。/(ㄒoㄒ)/~
jQueryUI——sortable###
sortable.js也可以轉換為jquery模式次员，需要引入一些文件败许，這里就不說了。現(xiàn)在說說jqueryUI這款插件淑蔚，里面也是有類似sortable的拖拽插件的市殷。
簡單案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="NARUTOne">
<title>jQuery UI 拖動（Draggable） + 排序（Sortable）</title>
<link rel="stylesheet" href="./lib/jquery-ui.css">
<script src="./lib/jquery-2.2.1.js"></script>
<script src="./lib/jquery-ui.js"></script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
}
li svg {
width:1em;
height:1em;
}
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-delete" viewBox="0 0 25.128 31.87">
<path d="M21.987,3.9H3.141C1.404,3.9,0,5.306,0,7.042v0.855h25.128V7.042c0-1.736-1.405-3.163-3.141-3.163 M16.5,1.91l0.463,2.624H8.165l0.463-2.5L16.5,1.971 M16.751,0H8.377C7.512,0,6.709,0.699,6.585,1.556l-0.61,3.518 c-0.12,0.855,0.49,1.554,1.352,1.554h10.472c0.863,0,1.474-0.699,1.354-1.556l-0.613-3.765C18.419,0.452,17.616,0,16.751,0 M22.512,9.922H2.616c-1.151,0-2.008,0.938-1.904,2.085l1.714,17.778c0.104,1.146,1.133,2.085,2.286,2.085h15.702 c1.153,0,2.182-0.938,2.284-2.085l1.717-17.778C24.518,10.86,23.663,9.922,22.512,9.922 M8.679,27.798H5.234l-1.047-14.04h4.491 V27.798z M14.556,27.798h-3.985v-14.04h3.985V27.798z M19.894,27.798h-3.245v-14.04h4.292L19.894,27.798z"></path>
</symbol>
</svg>
<ul>
<li id="draggable" class="ui-state-highlight">請拖拽我
<svg ><use xlink:href="#icon-delete"></use></svg>
</li>
</ul>
<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>
</ul>
</body>
</html>
當然，在jqueryUI插件中還有許多有趣強大的功能刹衫，有興趣的猿（媛）們可以看看醋寝。
這篇文章是在比較忙里偷閑下寫的，可能比較賴带迟，沒時間具體分析了音羞，就直接上代碼了。起始本人也是比較討厭直接看代碼的邮旷，這樣就沒有那種分享的意味了黄选。哎，各位就先將就下吧婶肩，有問題办陷，有bug可以評論下留言哈。(__) 嘻嘻……律歼。
接下來拖拽篇還有一篇HTML5下的拖拽民镜，這篇我會好好的寫的，好好分享下學習心得险毁，好期待哈O(∩_∩)O哈制圈！
