jQuery插件$.event.special.drag拖动实现javascript随意定制拖动功能

实现javascript随意定制拖动功能，jQueryUI有一个简单的拖动效果，其演示页面[查看jQueryUI Draggable演示]，但实现的拖动展示效果非常有限，这里介绍一个jQuery插件$.event.special.drag拖动。演示效果可在线查看[查看演示效果]

下载$.event.special.drag拖动插件

javascript代码分析
一，实现随意拖动效果，点击按钮可停止拖动

1. $('#demo1_box')
2. .bind('drag',function( event ){
3. $( this ).css({
4. top: event.offsetY,
5. left: event.offsetX
6. });
7. });

其中event.offsetY与event.offsetX分别表示可拖动的左上角坐标，这里表示可随意拖动。

二，沿X坐标或Y坐标拖动，默认沿X坐标拖动，如果按SHIFT键则沿Y坐标拖动

1. $('#demo2_box')
2. .bind('drag',function( event ){
3. $( this ).css( event.shiftKey ? {
4. top: event.offsetY } : {
5. left: event.offsetX
6. });
7. });

使用三元操作符event.shiftKey ? {top: event.offsetY } : {left: event.offsetX }，如果按SHIFT键，则沿event.offsetY拖动，否则沿 event.offsetX拖动.

三，按每格20px方式拖动

1. $('#demo3_box')
2. .bind('drag',function( event ){
3. $( this ).css({
4. top: Math.round( event.offsetY/20 ) * 20,
5. left: Math.round( event.offsetX/20 ) * 20
6. });
7. });

计算方法Math.round( event.offsetY/20 ) * 20和Math.round( event.offsetX/20 ) * 20

四，实现以手柄层可拖动效果
$('#demo4_box')
.bind('dragstart',function( event ){
return $(event.target).is('.handle');
})
.bind('drag',function( event ){
$( this ).css({
top: event.offsetY,
left: event.offsetX
});
});
dragstart表示拖动开始，event.target表示当前事件目标，当指向类名为.handle时触发拖动。

五，实现以手柄层可拖动，并增加拖动层显示样式效果

1. $('#demo5_box')
2. .bind('dragstart',function( event ){
3. if ( !$(event.target).is('.handle') ) return false;
4. $( this ).addClass('active');
5. })
6. .bind('drag',function( event ){
7. $( this ).css({
8. top: event.offsetY,
9. left: event.offsetX
10. });
11. })
12. .bind('dragend',function( event ){
13. $( this ).removeClass('active');
14. });

dragend表示当拖动结束后触发的方法

六，代理拖动效果，当拖动时只拖动一个代理层，然后再显示拖动结果
$('#demo6_box')
.bind('dragstart',function( event ){
if ( !$(event.target).is('.handle') ) return false;
return $( this ).css('opacity',.5)
.clone().addClass('active')
.insertAfter( this );
})
.bind('drag',function( event ){
$( event.dragProxy ).css({
top: event.offsetY,
left: event.offsetX
});
})
.bind('dragend',function( event ){
$( event.dragProxy ).remove();
$( this ).animate({
top: event.offsetY,
left: event.offsetX,
opacity: 1
})
});

opacity表示代理拖动层的透明度

七，在圆圈内拖动

1. $('#demo7_box')
2. .bind('dragstart',function( event ){
3. var data = $( this ).data('dragcircle');
4. if ( data ) data.$circle.show();
5. else {
6. data = {
7. radius: 200, $circle: $([]),
8. halfHeight: $( this ).outerHeight()/2,
9. halfWidth: $( this ).outerWidth()/2
10. };
11. data.centerX = event.offsetX + data.radius + data.halfWidth,
12. data.centerY = event.offsetY + data.halfHeight,
13. // create divs to highlight the path...
14. $.each( new Array(72), function( i, a ){
15. angle = Math.PI * ( ( i-36 ) / 36 );
16. data.$circle = data.$circle.add(
17. $('<div class="point" />').css({
18. top: data.centerY + Math.cos( angle )*data.radius,
19. left: data.centerX + Math.sin( angle )*data.radius,
20. })
21. );
22. });
23. $( this ).after( data.$circle ).data('dragcircle', data );
24. }
25. })
26. .bind('drag',function( event ){
27. var data = $( this ).data('dragcircle'),
28. angle = Math.atan2( event.pageX - data.centerX, event.pageY - data.centerY );
29. $( this ).css({
30. top: data.centerY + Math.cos( angle )*data.radius - data.halfHeight,
31. left: data.centerX + Math.sin( angle )*data.radius - data.halfWidth
32. });
33. })
34. .bind('dragend',function(){
35. $( this ).data('dragcircle').$circle.hide();
36. });

拖动开始生成一个圆周，拖动结束后隐藏圆圈，这里可以了解一个jQuery如何生成一个圆圈。

实现定制拖动效果，这里展示了jQuery插件$.event.special.drag的七种拖动效果，可扩展拖动功能，与简单的jQueryUI Draggable拖动相比，功能更为强大，值得推荐。