jquery は、すべての主要なブラウザと互換性のある単純なドラッグアンドドロップ効果の例を実装します

jquery は、すべての主要なブラウザと互換性のある単純なドラッグアンドドロップ効果の例を実装します_jquery

WBOY

リリース： 2016-05-16 17:31:41

オリジナル

950 人が閲覧しました

最近、Web ページのドラッグアンドドロップ効果を発見しました。個人的には、これが優れたユーザーエクスペリエンスであると考えています。時間をかけて調べたところ、その原理は非常に単純であることがわかりました。私が書いたカスタム関数。
jquery コード: fun.js

コードをコピーコードは次のとおりです:

 
 jQuery.fn .myDrag=function(){ 
_IsMove = 0; 
_MouseTop = 0; 
return $(this).bind("mousemove",function(e) { 
if(_IsMove==1){ 
$(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); 
} 
}) .bind( "mousedown",function(e){ 
_IsMove=1; 
var offset =$(this).offset(); 
_MouseLeft = e.pageX - offset.left; 
 _MouseTop = e .pageY - offset.top; 
}).bind("mouseup",function(){ 
_IsMove=0; 
}).bind("mouseout",function(){ 
_IsMove =0; 
}); 
} 

 

HTML コード:

コードをコピーしますコードは次のとおりです:

demo.htm http-equiv="content -type" content="text/html; charset=UTF-8"> 

$(function(){ $("#myDiv ").myDrag(); 
$("#myDiv2").myDrag(); 

 🎜> 
ドラッグ 1

ドラッグ 2< ;/div> 
 
レンダリング 2: