jQuery實(shí)現(xiàn)div隨意拖動(dòng)的實(shí)例代碼(通用代碼)
更新時(shí)間：2016年01月28日 09:24:01 作者：phpervip
這篇文章主要介紹了jQuery實(shí)現(xiàn)div隨意拖動(dòng)的實(shí)例代碼，涉及到j(luò)query div隨意拖動(dòng)相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
注意js放的位置，要放的靠近，若被其他覆蓋，則無(wú)法移動(dòng)。
比如：
<div id="move">可移動(dòng)的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();
如希望，點(diǎn)住時(shí)鼠標(biāo)變手形：
$("#move").mousedown(function(){
$(this).css("cursor","pointer");
}).mouseup(function(){
$(this).css("cursor","default");
});
下面給大家分享一段通用代碼jquery實(shí)現(xiàn)拖動(dòng)div的通用方法
<script type="text/javascript"><!--
$(document).ready(function()
{
$(".show").mousedown(function(e)//e鼠標(biāo)事件
{
$(this).css("cursor","move");//改變鼠標(biāo)指針的形狀
var offset = $(this).offset();//DIV在頁(yè)面的位置
var x = e.pageX - offset.left;//獲得鼠標(biāo)指針離DIV元素左邊界的距離
var y = e.pageY - offset.top;//獲得鼠標(biāo)指針離DIV元素上邊界的距離
$(document).bind("mousemove",function(ev)//綁定鼠標(biāo)的移動(dòng)事件，因?yàn)楣鈽?biāo)在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
$(".show").stop();//加上這個(gè)之后
var _x = ev.pageX - x;//獲得X軸方向移動(dòng)的值
var _y = ev.pageY - y;//獲得Y軸方向移動(dòng)的值
$(".show").animate({left:_x+"px",top:_y+"px"},10);
});
});
$(document).mouseup(function()
{
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})
})
// --></script>
您可能感興趣的文章:
- jQuery動(dòng)態(tài)添加可拖動(dòng)元素完整實(shí)例(附demo源碼下載)
- jquery拖動(dòng)層效果插件用法實(shí)例分析(附demo源碼)
- 使用jQuery的easydrag插件實(shí)現(xiàn)可拖動(dòng)的DIV彈出框
- jQuery實(shí)現(xiàn)簡(jiǎn)單的DIV拖動(dòng)效果
- jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
- jQuery實(shí)現(xiàn)移動(dòng)端滑塊拖動(dòng)選擇數(shù)字效果
- jQuery實(shí)現(xiàn)拖動(dòng)效果的實(shí)例代碼
相關(guān)文章
jQuery之動(dòng)畫ajax事件(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jQuery之動(dòng)畫ajax事件(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼代碼
本文主要分享了jquery實(shí)現(xiàn)表單獲取短信驗(yàn)證碼的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
淺析jquery與checkbox的checked屬性的問題
下面小編就為大家?guī)?lái)一篇淺析jquery與checkbox的checked屬性的問題。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧2016-04-04
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義滾動(dòng)條插件的使用方法。需要的朋友可以參考借鑒2016-12-12
這篇文章主要介紹了jquery選擇器原理介紹($()使用方法),需要的朋友可以參考下2014-03-03
easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JQuery表單元素取值賦值方法總結(jié),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
下面小編就為大家?guī)?lái)一篇JQuery 的跨域方法推薦_可跨任何網(wǎng)站。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05
基于jquery的固定表頭和列頭的代碼，需要的朋友可以參考下2012-05-05
jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02