draggabilly一款功能強大的拖動拖拽元素外掛
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
draggabilly一款功能強大的拖動拖拽元素外掛:http://download.csdn.net/detail/cometwo/9411895
支援移動觸控裝置的純js元素拖放外掛 :http://download.csdn.net/detail/cometwo/9411907
：“`
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>draggabilly一款功能強大的拖動拖拽元素外掛|DEMO_愛程式設計w2bc.com</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/draggabilly.pkgd.min.js"></script> <style type="text/css"> .box { position: relative; background: #fa0; border-radius: 10px; z-index: 10; margin: 0 auto; } .box:hover { cursor: move; } .box.is-pointer-down { background: #09F; } .box.is-dragging { opacity: 0.7; } .box-1 { width: 150px; height: 150px; } .box-2 { width: 200px; height: 100px; } .box-3 { width: 150px; height: 150px; } .box-4 { width: 150px; height: 150px; padding: 20px; } .total-centered { position: absolute; width: 100%; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .container { padding: 10px; border: 5px solid #F90; width: 800px; height: 200px; border-radius: 10px; margin: 0 auto; } .draggable { width: 140px; height: 140px; background: #F90; border-radius: 10px; margin: 0 10px 10px 0; float: left; } .draggable.is-pointer-down { background: #09F; z-index: 12; /* above other draggies */ } .handle { background: #555; background: hsla(0, 0%, 0%, 0.4); width: 60px; height: 60px; border-radius: 5px; } </style> <!--[if IE]> <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script><![endif]--></head><body> <article class="htmleaf-container"> <div class="htmleaf-content"> <h3>下面的矩形可以任意拖動。</h3> <div class="box box-1" id="draggable1"> <div class="total-centered">Drap me</div> </div> <h3>下面的矩形只能在X軸上拖動。</h3> <div class="box box-2" id="draggable2"> <div class="total-centered">axis:'x'</div> </div> <h3>下面的矩形只能在父容器中移動。</h3> <div class="container"> <div class="draggable"></div> <div class="draggable"></div> <div class="draggable"></div> </div> <h3>以網格的方式拖動。</h3> <div class="box box-3" id="draggable3"> <div class="total-centered">grid[x,y]</div> </div> <h3>指定拖動互動元素(只有內部小方塊區域可以進行拖動)。</h3> <div class="box box-4" id="draggable4"> <div class="handle"></div> </div> </div> </article> <!--<script> window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>') </script> --> <script type="text/javascript"> $(function() { $('#draggable1').draggabilly(); $('#draggable2').draggabilly({ axis: 'x' }); $('.draggable').draggabilly({ containment: true }); $('#draggable3').draggabilly({ grid: [100, 100] }); $('#draggable4').draggabilly({ handle: '.handle' }); }); </script></body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
“`
draggabilly是一款功能強大的網頁元素拖動拖拽外掛。該元素拖拽外掛可以和jQuery結合使用，也可以以純js的方式使用。它提供了強大的拖拽元素的能力，並且可以支援IE8瀏覽器和移動觸控裝置。
使用方法
安裝
可以通過bower或npm來安裝該draggabilly外掛。
bower install draggabilly
npm install draggabilly
作為jQuery外掛來使用
var draggable.one( ‘eventName’, function() {
console.log(‘eventName happened just once’);
});
通過純JS來繫結事件
也可以通過純JS使用.on()，.off()，.one()方法來繫結事件，在事件內部，this引用就是Draggabilly元素。
// vanilla JS
function listener(/* parameters */) {
console.log( ‘eventName happened’, this.position.x, this.position.y );
}
// 繫結事件監聽
draggie.on( ‘eventName’, listener );
// 移除事件監聽
draggie.off( ‘eventName’, listener );
// 只繫結一次事件，注意是ONCE，而不是ONE或ON
draggie.once( ‘eventName’, function() {
console.log(‘eventName happened just once’);
});
dragStart
在拖動開始，元素移動的時候觸發。
// jQuery
$draggable.on( ‘dragStart’, function( event, pointer ) {…})
// vanilla JS
draggie.on( ‘dragStart’, function( event, pointer ) {…})
event：型別：Event。原生的mousedown或touchstart事件。
pointer：型別：MouseEvent或Touch。有.pageX和.pageY的事件物件。
dragMove
在拖拽元素移動的時候觸發。
// jQuery
$draggable.on( ‘dragMove’, function( event, pointer, moveVector ) {…})
// vanilla JS
draggie.on( ‘dragMove’, function( event, pointer, moveVector ) {…})
event：型別：Event。原生的mousemove或touchmove事件。
pointer：型別：MouseEvent或Touch。有.pageX和.pageY的事件物件。
moveVector：型別：Object。滑鼠指標移動到距離開始移動位置有多遠：{ x: 20, y: -30 }。
dragEnd
當元素拖動結束的時候觸發。
// jQuery
$draggable.on( ‘dragEnd’, function( event, pointer ) {…})
// vanilla JS
draggie.on( ‘dragEnd’, function( event, pointer ) {…})
event：型別：Event。原生的mouseup或touchend事件。
pointer：型別：MouseEvent或Touch。有.pageX和.pageY的事件物件。
pointerDown
當用戶指標（mouse, touch, pointer）被按下的時候觸發。
// jQuery
$draggable.on( ‘pointerDown’, function( event, pointer ) {…})
// vanilla JS
draggie.on( ‘pointerDown’, function( event, pointer ) {…})
event：型別：Event。原生的mousedown或touchstart事件。
pointer：型別：MouseEvent或Touch。有.pageX和.pageY的事件物件。
pointerMove
當用戶指標移動的時候觸發。
// jQuery
$draggable.on( ‘pointerMove’, function( event, pointer, moveVector ) {…})
// vanilla JS
draggie.on( ‘pointerMove’, function( event, pointer, moveVector ) {…})
event：型別：Event。原生的mousemove或touchmove事件。
pointer：型別：MouseEvent或Touch。有.pageX和.pageY的事件物件。
moveVector：型別：Object。滑鼠指標移動到距離開始移動位置有多遠：{ x: 20, y: -30 }。
pointerUp
當用戶指標被鬆開的時候觸發。
// jQuery
$draggable.on( ‘pointerUp’, function( event, pointer ) {…})
// vanilla JS
draggie.on( ‘pointerUp’, function( event, pointer ) {…})
event：型別：Event。原生的mouseup或touchend事件。
pointer：型別：MouseEvent或Touch。有.pageX和.pageY的事件物件。
staticClick
在使用者指標被按下不鬆開，並且沒有移動的時候觸發。
// jQuery
$draggable.on( ‘staticClick’, function( event, pointer ) {…})
// vanilla JS
draggie.on( ‘staticClick’, function( event, pointer ) {…})
event：型別：Event。原生的mouseup或touchend事件。
pointer：型別：MouseEvent或Touch。有.pageX和.pageY的事件物件。
方法
disable
// jQuery
$draggable.draggabilly(‘disable’)
// vanilla JS
draggie.disable()
enable
// jQuery
$draggable.draggabilly(‘enable’)
// vanilla JS
draggie.enable()
destroy
// jQuery
$draggable.draggabilly(‘destroy’)
// vanilla JS
draggie.destroy()
jQuery.fn.data(‘draggabilly’)：從jQuery物件中獲取Draggabilly例項。
var draggie = $(‘.draggable’).data(‘draggabilly’)
// access Draggabilly PRoperties
console.log( ‘draggie at ’ + draggie.position.x + ‘, ’ + draggie.position.y )
Draggabilly官方主頁：http://draggabilly.desandro.com/
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
