jquery或JS拖動DIV左右移動

html

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出猇亭免費做網(wǎng)站回饋大家。

head

titlejquery或JS拖動DIV左右移動/title

script?src="jquery-1.7.1.min.js"/script

style?type="text/css"

body?{background-color:?#fff;?}

.win?{position:?absolute;?top:?0px;?left:?0px;width:?300px;height:?222px;}

.title?{height:?20px;width:?300px;??position:?absolute;background-color:?#0094ff;?float:?inherit;?top:?0px;?left:?0px;?}

.winCon?{?height:?200px;width:?298px;?position:?absolute;?border:?solid;?

border-width:?1px;?border-color:?#0094ff;?border-top:?none;??float:?inherit;?left:?0px;?top:?20px;?}

/style

/head

body?onload="showDiv(this,'test1');"

/body

script?type="text/javascript"

function?showDiv(element,?str)?{

$(document.body).append("div?class='win'?id='win"?+?str?+?"'div?class='title'?id='"?+?str?+?"'/divdiv?class='winCon'?清新自在/div/div");

$("#"?+?str).mousedown(function?(event)?{

var?offset?=?$(this).offset();

_x?=?event.clientX?-?offset.left;

_y?=?event.clientY?+?20?-?offset.top;

$("#win"?+?str).css({?"top":?offset.top?-?20?+?"px"?});

$("#win"?+?str).mousemove(function?(event)?{

_xx?=?event.clientX?-?_x;

_yy?=?event.clientY?-?_y;

this.style.left?=?_xx?+?"px";

this.style.top?=?_yy?+?"px";

this.style.zIndex?=?"100";

return?false;

});

return?false;

});

$("#win"?+?str).mouseup(function?()?{

$(this).unbind("mousemove");

$(this).css({?"z-index":?"-1"?});

return?false;

});

}

/script

/html

jQuery怎么實現(xiàn)改變div邊框和拖動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在頁面的位置

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)的移動事件，因為光標(biāo)在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

div拖拽縮放jquery插件編寫——帶8個控制點

拖拽以及縮放需要有一個范圍，姑且管這個叫舞臺（stage）。另外，在舞臺范圍內(nèi)，如何以一種簡單的方式定義拖拽項？可以通過給div增加一個拖拽class（例如：resize-item），拖拽項應(yīng)該是absolute布局，舞臺是relative/absolute布局

所以拖拽類需要有如下兩個參數(shù)

控制面板初始化的時候，應(yīng)該是隱藏的，只有點擊對應(yīng)的拖拽項的時候才出現(xiàn)，并且點擊舞臺空白部分，需要隱藏控制面板（組織事件冒泡）

如果這篇文章對你有用，不妨點個贊

查看源碼

分享題目：jquery拖動div,jquery拖動 創(chuàng)建 列表
網(wǎng)站地址：http://chinadenli.net/article12/dsgsddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、企業(yè)網(wǎng)站制作、云服務(wù)器、響應(yīng)式網(wǎng)站、網(wǎng)站維護、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)