jQuery拖拽div實(shí)現(xiàn)思路
更新時(shí)間：2014年02月19日 16:18:33 作者：
jQuery拖拽div,利用jquery的mousemove，mousedown，mouseup三個(gè)事件,需要的朋友可以參考下
思路是利用jquery的mousemove，mousedown，mouseup三個(gè)事件，定義兩個(gè)相對(duì)位置，分別是
1、組件左上角與屏幕左上角的相對(duì)位置
2、鼠標(biāo)所在坐標(biāo)與組件左上角的相對(duì)位置。
具體函數(shù)如下：
.drag{
position:absolute;
background:#0000CC;
top:100px;left:200px;
padding:0;
}
$(document).ready(function(){
var move=false;//移動(dòng)標(biāo)記
var _x,_y;//鼠標(biāo)離控件左上角的相對(duì)位置
$(".drag").mousedown(function(e){
move=true;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e.pageY-parseInt($(".drag").css("top"));
});
$(document).mousemove(function(e){
if(move){
var x=e.pageX-_x;//控件左上角到屏幕左上角的相對(duì)位置
var y=e.pageY-_y;
$(".drag").css({"top":y,"left":x});
}
}).mouseup(function(){
move=false;
});
其中e.pageX,e.pageY為當(dāng)前鼠標(biāo)的橫縱坐標(biāo)。
大家自己動(dòng)手試一下，思路就更加清晰了~
1、組件左上角與屏幕左上角的相對(duì)位置
2、鼠標(biāo)所在坐標(biāo)與組件左上角的相對(duì)位置。
具體函數(shù)如下：
復(fù)制代碼 代碼如下:
.drag{
position:absolute;
background:#0000CC;
top:100px;left:200px;
padding:0;
}
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var move=false;//移動(dòng)標(biāo)記
var _x,_y;//鼠標(biāo)離控件左上角的相對(duì)位置
$(".drag").mousedown(function(e){
move=true;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e.pageY-parseInt($(".drag").css("top"));
});
$(document).mousemove(function(e){
if(move){
var x=e.pageX-_x;//控件左上角到屏幕左上角的相對(duì)位置
var y=e.pageY-_y;
$(".drag").css({"top":y,"left":x});
}
}).mouseup(function(){
move=false;
});
其中e.pageX,e.pageY為當(dāng)前鼠標(biāo)的橫縱坐標(biāo)。
大家自己動(dòng)手試一下，思路就更加清晰了~
您可能感興趣的文章:
- jQuery 移動(dòng)端拖拽（模塊化開(kāi)發(fā)，觸摸事件，webpack）
- jQuery拖拽通過(guò)八個(gè)點(diǎn)改變div大小
- jQuery實(shí)現(xiàn)div拖拽效果實(shí)例分析
- jQuery div拖拽用法實(shí)例
- jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
- jQuery控制Div拖拽效果完整實(shí)例分析
- jquery實(shí)現(xiàn)拖拽調(diào)整Div大小
- jquery實(shí)現(xiàn)div拖拽寬度示例代碼
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- Jquery實(shí)現(xiàn)移動(dòng)端控制DIV拖拽
相關(guān)文章
jQuery的animate函數(shù)學(xué)習(xí)記錄
jQuery.animate的每種動(dòng)畫(huà)過(guò)渡效果都是通過(guò)easing函數(shù)實(shí)現(xiàn)的，下面是自己研究之后對(duì)其的基本認(rèn)識(shí)2014-08-08
jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁(yè)面頂端的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁(yè)面頂端的方法,涉及jQuery針對(duì)頁(yè)面操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery表單驗(yàn)證的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery針對(duì)表單必填項(xiàng)進(jìn)行驗(yàn)證的方法,需要的朋友可以參考下2016-10-10
jQuery中綁定事件bind() on() live() one()的異同
本文主要介紹了jQuery中綁定事件bind() on() live() one()的異同，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)的方法和示例，基于jQuery插件jQuery.album.js來(lái)實(shí)現(xiàn)的，效果非常不錯(cuò)，這里推薦給大家，希望大家能夠喜歡。2015-03-03
【經(jīng)典源碼收藏】jQuery實(shí)用代碼片段(篩選,搜索,樣式,清除默認(rèn)值,多選等)
這篇文章主要介紹了jQuery實(shí)用代碼片段,包括篩選,搜索,樣式,清除默認(rèn)值,多選等多種功能.具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
本文主要對(duì)jquery中的each用法進(jìn)行介紹，相信會(huì)對(duì)大家學(xué)習(xí)each方法會(huì)很有幫助，下面就跟小編一起來(lái)看下吧2016-12-12
這篇文章主要介紹了基于bootstrap3和jquery的分頁(yè)插件的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jquery制作居中遮罩層效果示例,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了jquery.form.js異步提交表單的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04