最近、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:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
