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