jQueryはdivが随意にドラッグするインスタンスコード(汎用コード)を実現する
1484 ワード
注意jsの置く位置は、近づけるようにして、他に覆われていると移動できません.
例:
jqueryを導入するjs, jquery-ui.js,
:
に じて、マウスをクリックすると の が わります.
に、 コードjqueryがdivをドラッグする な について します.
例:
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");
})
})
// -->