新浪特有的div移动如何做？
日期：2014-05-16 浏览次数：20438 次
新浪特有的div移动怎么做？？？
就是在博客和微博中的用的，，，比如一个div要移动，本身不变，出现一个等大的虚线框移动，停下后，div移动到虚线框位置。。
这效果不错啊，，有什么思路？？
------解决方案--------------------
继续蹭分。。。
就是在博客和微博中的用的，，，比如一个div要移动，本身不变，出现一个等大的虚线框移动，停下后，div移动到虚线框位置。。
这效果不错啊，，有什么思路？？
------解决方案--------------------
继续蹭分。。。
- HTML code
<html>
<head>
<title>title</title>
</head>
<body>
<div id="range" style="width:800px; height:800px; border:1px solid #333;">
fsfdsfdsf
fdsfd
</div><div id="bb" style="width:200px; height:200px; background-color:blue; left:0; top:0; overflow:hidden;">
<div id="ss" style="height:20px; background-color:red;"></div>
<div><img src="x.png"></div>
</div>
<script type="text/javascript">
(function(window){
var document = window.document;
var Drag = function(activeDom,dragDom){
this.mousedownHandle = this.getMousedownHandle();
this.mousemoveHandle = this.getMousemoveHandle();
this.mouseupHandle = this.getMouseupHandle();
this.bind(activeDom,dragDom);
}
Drag.prototype = {
bind:function(activeDom,dragDom){
if(!activeDom)return;
dragDom = dragDom||activeDom;
dragDom.style.position = 'absolute';
activeDom.style.cursor = 'move';
this.activeDom = activeDom;
this.dragDom = dragDom;
return this;
},
setRange:function(dom){
this.range = dom;
},
start:function(){
this.listenEvent(this.activeDom,'mousedown',this.mousedownHandle);
return this;
},
stop:function(){
this.removeEventListen(this.activeDom,'mousedown',this.mousedownHandle);
this.activeDom.style.cursor = 'default';
return this;
},
getMousedownHandle:function(){
_this = this;
return function(e){
e = e || window.event;
_this.dx = e.clientX - _this.dragDom.offsetLeft;
_this.dy = e.clientY - _this.dragDom.offsetTop;
_this.listenEvent(document,'mousemove',_this.mousemoveHandle);
_this.listenEvent(document,'mouseup',_this.mouseupHandle);
_this.agency = _this.agency || _this.dragDom.cloneNode(false);
_this.agency.style.background='none';
_this.agency.style.border = '2px solid #ccc';
_this.agency.style.left = e.clientX - _this.dx + 'px';
_this.agency.style.top = e.clientY - _this.dy + 'px';
_this.agency.style.zIndex = "999999";
document.body.appendChild(_this.agency);
_this.preventDefault(e);
_this.onDragBegin && _this.onDragBegin.call(_this.dragDom);
}
},
getMousemoveHandle:function(){
_this = this;
return function(e){
e = e || window.event;
_this.setPosition(e.clientX - _this.dx,e.clientY - _this.dy);
_this.preventDefault(e);
}
},
getMouseupHandle:function(){
_this = this;
return function(e){
e = e || window.event;
_this.dragDom.style.left = _this.agency.offsetLeft+'px';
_this.dragDom.style.top = _this.agency.offsetTop+'px';
_this.removeEventListen(document,'mousemove',_this.mousemoveHandle);
_this.removeEventListen(document,'mouseup',_this.mouseupHandle);
document.body.removeChild(_this.agency);
_this.onDragEnd && _this.onDragEnd.call(_this.dragDom);
}
},
setPosition:function(x,y){
var range;
if(range = _this.range){
if(x<range.offsetLeft)x=range.offsetLeft;
if(y<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
