jquery拖动div,jquery拖动 创建 列表

jquery或JS拖动DIV左右移动

html

公司主营业务：成都网站建设、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出猇亭免费做网站回馈大家。

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怎么实现改变div边框和拖动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

div拖拽缩放jquery插件编写——带8个控制点

拖拽以及缩放需要有一个范围，姑且管这个叫舞台（stage）。另外，在舞台范围内，如何以一种简单的方式定义拖拽项？可以通过给div增加一个拖拽class（例如：resize-item），拖拽项应该是absolute布局，舞台是relative/absolute布局

所以拖拽类需要有如下两个参数

控制面板初始化的时候，应该是隐藏的，只有点击对应的拖拽项的时候才出现，并且点击舞台空白部分，需要隐藏控制面板（组织事件冒泡）

如果这篇文章对你有用，不妨点个赞

查看源码