html
创新互联专注于企业营销型网站建设、网站重做改版、昭阳网站定制设计、自适应品牌网站建设、H5场景定制、商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为昭阳等各大城市提供网站开发制作服务。
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实现拖拽很简单的：
$(element).myDrag({
parent:'parent', //定义拖动不能超出的外框,拖动范围
randomPosition:true, //初始化随机位置
direction:'all', //方向
handler:false, //把手
dragStart:function(x,y){}, //拖动开始 x,y为当前坐标
dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标
dragMove:function(x,y){} //拖动进行中 x,y为当前坐标
});
具体的可以看这里：jquery.drag.js—实现拖拽效果的插件
有完整的在线实例演示的！！！
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
