jQueryはdivが随意にドラッグするインスタンスコード(汎用コード)を実現する

1484 ワード

注意jsの置く位置は、近づけるようにして、他に覆われていると移動できません.
例:

DIV

jqueryを導入するjs, jquery-ui.js,



:

$("#move").draggable();

に じて、マウスをクリックすると の が わります.

$("#move").mousedown(function(){
$(this).css("cursor","pointer");
}).mouseup(function(){
$(this).css("cursor","default");
});

に、 コードjqueryがdivをドラッグする な について します.

<!-- 
$(document).ready(function() 
{ 
$(".show").mousedown(function(e)//e     
{ 
$(this).css("cursor","move");//          
var offset = $(this).offset();//DIV       
var x = e.pageX - offset.left;//       DIV         
var y = e.pageY - offset.top;//       DIV         
$(document).bind("mousemove",function(ev)//         ,     DIV         ,    doucment   ,   DIV      
{ 
$(".show").stop();//       
var _x = ev.pageX - x;//  X        
var _y = ev.pageY - y;//  Y        
$(".show").animate({left:_x+"px",top:_y+"px"},10); 
}); 
}); 
$(document).mouseup(function() 
{ 
$(".show").css("cursor","default"); 
$(this).unbind("mousemove"); 
}) 
}) 
// -->