jquery或JS拖动DIV左右移动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery或JS拖动DIV左右移动相关的知识，希望对你有一定的参考价值。
<html><head>
<title>jquery或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 + "'></div><div 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>
//拖拽插件,参数:id或object
$.Move = function(_this)
if(typeof(_this)=='object')
_this=_this;
else
_this=$("#"+_this);
if(!_this)return false;
_this.css('position':'absolute').hover(function()$(this).css("cursor","move");,function()$(this).css("cursor","default");)
_this.mousedown(function(e)//e鼠标事件
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
_this.css('opacity':'0.3');
$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
_this.bind('selectstart',function()return false;);
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
_this.css('left':_x+"px",'top':_y+"px");
);
);
$(document).mouseup(function()
$(this).unbind("mousemove");
_this.css('opacity':'');
)
;
)(jQuery)
$.Move($('#moveId'));
<div id="moveId">adsfasdfadf</div>
任意拖动
只需要<div id="moveId">adsfasdfadf</div> 放到页面的JS前面加载就可以拖拽了，
或者加载【$.Move($('#moveId'));】这个方法，放到节点加载完后加载。就可以解决了，方法如下。
$.Move($('#moveId'));
) 参考技术C 以后问问题的时候,你说清楚别人也好回答你,问问题都不负责的态度,回答问题的人自然不乐意搭理.
jquery-ui有一个draggable插件,你自己去jquery网站搜索下吧.
jQuery 通过鼠标摇拽改变div的大小
鼠标移动到Div边框上，拖动可以改变Div的大小
身为一个前端人，必须告诉你的是：前端效果很多都是用表象来忽悠人的。要做你要的效果需要作假：
①做3个用于拖动标签（右边、下边、右下角）三个，默认是空白的，根据原来的DIV定义大小和位置，绝对定位，hover上去鼠标变一下，点击鼠标可拖拽。
②拖拽的过程中实时改变原div大小并同时修改相关拖动标签的大小位置。
③拖拽可使用jQueryUI的核心库就可以了。 参考技术A 不知道啊
以上是关于jquery或JS拖动DIV左右移动的主要内容，如果未能解决你的问题，请参考以下文章