jquery は、すべての主流ブラウザと互換性のあるシンプルなドラッグ アンド ドロップ効果の例を実装します (最適化)_jquery

前の記事と比較して、ドラッグ アンド ドロップの効果が最適化されました。
js コード: fun.js

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

_MoveObj = null ;//現在の div を表すために使用されるすべての変数
z_index = 0; //Z 方向
jQuery.fn.myDrag=function(){
_IsMove = 0;移動 1.
_MouseLeft = 0; //div 左座標
_MouseTop = 0; //div 上座標
$(document).bind("mousemove",function(e){
if(_IsMove== 1){
$(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});
}
}); Mouseup",function( ){
_IsMove=0;
$(_MoveObj).removeClass("downMouse");
});
return $(this).bind("mousedown", function(e){
_IsMove=1;
_MoveObj = this;
_MouseLeft = e.pageX - offset.left; _MouseTop = e.pageY - offset.top;
_MoveObj.style.zIndex=z_index;
$(_MoveObj).addClass("downMouse"); }


html コード:

コードをコピー

コードは次のとおりです: デモ。 htm

text/javascript">
$(function(){
$(".myDiv").myDrag();
//$("#myDiv2").myDrag();
})

1

🎜>

2 をドラッグ

3 をドラッグ

4 をドラッグ

5 をドラッグ

div id= "myDiv6" class="myDiv"> 6

/html> ;