Heim > Web-Frontend > js-Tutorial > Beispielcode für jQuery zum Realisieren des zufälligen Ziehens von Divs (allgemeiner Code)_jquery

Beispielcode für jQuery zum Realisieren des zufälligen Ziehens von Divs (allgemeiner Code)_jquery

WBOY
Freigeben: 2016-05-16 15:17:21
Original
1440 Leute haben es durchsucht

Achten Sie auf den Ort, an dem js platziert wird. Wenn es von anderen verdeckt wird, kann es nicht verschoben werden.

Zum Beispiel:

<div id="move">可移动的DIV</div>
Nach dem Login kopieren

Einführung von jquery.js, jquery-ui.js,

<script scr="http://code.jquery.com/jquery-1.10.2.js"></script>
<script scr="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Nach dem Login kopieren

Ein Satz:

$("#move").draggable();
Nach dem Login kopieren

Wenn Sie möchten, ändert sich die Maus in eine Handform, wenn Sie klicken und gedrückt halten:

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

Lassen Sie mich eine gemeinsame Code-Abfrage mit Ihnen teilen, um eine gemeinsame Methode zum Ziehen von Divs zu implementieren

<script type="text/javascript"><!-- 
$(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"); 
}) 
}) 
// --></script> 
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage