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

最近、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 コード:

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

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


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

🎜>

ドラッグ 1

ドラッグ 2< ;/div>



レンダリング 2:

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。