jQuery實現(xiàn)div隨意拖動的實例代碼(通用代碼)
更新時間：2016年01月28日 09:24:01 作者：phpervip
這篇文章主要介紹了jQuery實現(xiàn)div隨意拖動的實例代碼，涉及到j(luò)query div隨意拖動相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧
注意js放的位置，要放的靠近，若被其他覆蓋，則無法移動。
比如：
<div id="move">可移動的DIV</div>
引入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>
一句：
$("#move").draggable();
如希望，點住時鼠標變手形：
$("#move").mousedown(function(){
$(this).css("cursor","pointer");
}).mouseup(function(){
$(this).css("cursor","default");
});
下面給大家分享一段通用代碼jquery實現(xiàn)拖動div的通用方法
<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>
相關(guān)文章
下面小編就為大家?guī)硪黄猨Query之動畫ajax事件(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本文主要分享了jquery實現(xiàn)表單獲取短信驗證碼的代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
淺析jquery與checkbox的checked屬性的問題
下面小編就為大家?guī)硪黄獪\析jquery與checkbox的checked屬性的問題。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了jQuery實現(xiàn)的自定義滾動條插件的使用方法。需要的朋友可以參考借鑒2016-12-12
這篇文章主要介紹了jquery選擇器原理介紹($()使用方法),需要的朋友可以參考下2014-03-03
easyUI combobox實現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細介紹了easyUI combobox實現(xiàn)聯(lián)動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JQuery表單元素取值賦值方法總結(jié),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
下面小編就為大家?guī)硪黄狫Query 的跨域方法推薦_可跨任何網(wǎng)站。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
基于jquery的固定表頭和列頭的代碼，需要的朋友可以參考下2012-05-05
jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02