`
baby69yy2000
  • 浏览: 187762 次
  • 性别: Icon_minigender_1
  • 来自: 自己输入城市...
社区版块
存档分类
最新评论

[转]用javascript进行拖拽

    博客分类：
  • JS-1
JavaScriptASPRESTprototype脚本 
阅读更多
http://www.blueidea.com/tech/web/2006/3791.asp
本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html所有版权归原文所有

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！

网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素． 

<SCRIPT 
      src="/articleimg/2006/07/3791/drag_drop.js" 
      type=text/javascript></SCRIPT>
<STYLE type=text/css>LI {
	MARGIN-BOTTOM: 10px
}
OL {
	MARGIN-TOP: 5px
}
.DragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BACKGROUND-COLOR: #eee
}
.DragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
	FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
	BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
	FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}
PRE {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #f8f8f0
}
</STYLE>
<body>
<FIELDSET id=Demo4><LEGEND>样例- 拖拽页面元素</LEGEND>
      <DIV>
      <DIV class=DragContainer id=DragContainer4 overclass="OverDragContainer">
      <DIV class=DragBox id=Item1 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #1</DIV>
      <DIV class=DragBox id=Item2 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #2</DIV>
      <DIV class=DragBox id=Item3 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #3</DIV>
      <DIV class=DragBox id=Item4 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #4</DIV></DIV>
      <DIV class=DragContainer id=DragContainer5 overclass="OverDragContainer">
      <DIV class=DragBox id=Item5 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #5</DIV>
      <DIV class=DragBox id=Item6 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #6</DIV>
      <DIV class=DragBox id=Item7 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #7</DIV>
      <DIV class=DragBox id=Item8 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #8</DIV></DIV>
      <DIV class=DragContainer id=DragContainer6 overclass="OverDragContainer">
      <DIV class=DragBox id=Item9 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #9</DIV>
      <DIV class=DragBox id=Item10 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #10</DIV>
      <DIV class=DragBox id=Item11 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #11</DIV>
      <DIV class=DragBox id=Item12 overclass="OverDragBox" 
      dragclass="DragDragBox">Item #12</DIV></DIV></DIV></FIELDSET>
</body>
</html>


获取鼠标移动信息:
第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了: 
document.onmousemove = mouseMove;

function mouseMove(ev){
 ev           = ev || window.event;
 var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
 if(ev.pageX || ev.pageY){
  return {x:ev.pageX, y:ev.pageY};
 }
 return {
  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  y:ev.clientY + document.body.scrollTop  - document.body.clientTop
 };
}



<script>

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
		document.getElementById('xxx').value = mousePos.x;
		document.getElementById('yyy').value = mousePos.y;
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

document.onmousemove = mouseMove;
</script>Mouse X Position:
<input id=xxx type=text>
<br>Mouse Y Position:
<input id=yyy type=text>

</body>
</html>


全部脚本 
<STYLE>LI {
	MARGIN-BOTTOM: 10px
}
OL {
	MARGIN-TOP: 5px
}
.DragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
}
.OverDragContainer {
	BACKGROUND-COLOR: #eee
}
.DragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.DragDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.miniDragBox {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 10px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; WIDTH: 94px; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; FONT-FAMILY: verdana, tahoma, arial; BACKGROUND-COLOR: #eee
}
.OverDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	BACKGROUND-COLOR: #ffff99
}
.DragDragBox {
	FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ff99cc
}
LEGEND {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #666699; FONT-FAMILY: verdana, tahoma, arial
}
FIELDSET {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.History {
	FONT-SIZE: 10px; OVERFLOW: auto; WIDTH: 100%; FONT-FAMILY: verdana, tahoma, arial; HEIGHT: 82px
}
#DragContainer8 {
	BORDER-RIGHT: #669999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #669999 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: #669999 1px solid; WIDTH: 110px; PADDING-TOP: 5px; BORDER-BOTTOM: #669999 1px solid; HEIGHT: 110px
}
.miniDragBox {
	FLOAT: left; MARGIN: 0px 5px 5px 0px; WIDTH: 20px; HEIGHT: 20px
}
pre{border:1 solid #CCC;background-color:#F8F8F0;padding:10px;}
</STYLE>


<script>

// iMouseDown represents the current mouse button state: up or down
/*
lMouseState represents the previous mouse button state so that we can
check for button clicks and button releases:

if(iMouseDown && !lMouseState) // button just clicked!
if(!iMouseDown && lMouseState) // button just released!
*/
var mouseOffset = null;
var iMouseDown  = false;
var lMouseState = false;
var dragObject  = null;

// Demo 0 variables
var DragDrops   = [];
var curTarget   = null;
var lastTarget  = null;
var dragHelper  = null;
var tempDiv     = null;
var rootParent  = null;
var rootSibling = null;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function CreateDragContainer(){
	/*
	Create a new "Container Instance" so that items from one "Set" can not
	be dragged into items from another "Set"
	*/
	var cDrag        = DragDrops.length;
	DragDrops[cDrag] = [];

	/*
	Each item passed to this function should be a "container".  Store each
	of these items in our current container
	*/
	for(var i=0; i<arguments.length; i++){
		var cObj = arguments[i];
		DragDrops[cDrag].push(cObj);
		cObj.setAttribute('DropObj', cDrag);

		/*
		Every top level item in these containers should be draggable.  Do this
		by setting the DragObj attribute on each item and then later checking
		this attribute in the mouseMove function
		*/
		for(var j=0; j<cObj.childNodes.length; j++){

			// Firefox puts in lots of #text nodes...skip these
			if(cObj.childNodes[j].nodeName=='#text') continue;

			cObj.childNodes[j].setAttribute('DragObj', cDrag);
		}
	}
}


function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}



function getPosition(e){
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e     = e.offsetParent;
	}

	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

	return {x:left, y:top};

}


function mouseMove(ev){
	ev         = ev || window.event;

	/*
	We are setting target to whatever item the mouse is currently on

	Firefox uses event.target here, MSIE uses event.srcElement
	*/
	var target   = ev.target || ev.srcElement;
	var mousePos = mouseCoords(ev);

	// mouseOut event - fires if the item the mouse is on has changed
	if(lastTarget && (target!==lastTarget)){
		// reset the classname for the target element
		var origClass = lastTarget.getAttribute('origClass');
		if(origClass) lastTarget.className = origClass;
	}

	/*
	dragObj is the grouping our item is in (set from the createDragContainer function).
	if the item is not in a grouping we ignore it since it can't be dragged with this
	script.
	*/
	var dragObj = target.getAttribute('DragObj');

	 // if the mouse was moved over an element that is draggable
	if(dragObj!=null){

		// mouseOver event - Change the item's class if necessary
		if(target!=lastTarget){
			var oClass = target.getAttribute('overClass');
			if(oClass){
				target.setAttribute('origClass', target.className);
				target.className = oClass;
			}
		}

		// if the user is just starting to drag the element
		if(iMouseDown && !lMouseState){
			// mouseDown target
			curTarget     = target;

			// Record the mouse x and y offset for the element
			rootParent    = curTarget.parentNode;
			rootSibling   = curTarget.nextSibling;

			mouseOffset   = getMouseOffset(target, ev);

			// We remove anything that is in our dragHelper DIV so we can put a new item in it.
			for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);

			// Make a copy of the current item and put it in our drag helper.
			dragHelper.appendChild(curTarget.cloneNode(true));
			dragHelper.style.display = 'block';

			// set the class on our helper DIV if necessary
			var dragClass = curTarget.getAttribute('dragClass');
			if(dragClass){
				dragHelper.firstChild.className = dragClass;
			}

			// disable dragging from our helper DIV (it's already being dragged)
			dragHelper.firstChild.removeAttribute('DragObj');

			/*
			Record the current position of all drag/drop targets related
			to the element.  We do this here so that we do not have to do
			it on the general mouse move event which fires when the mouse
			moves even 1 pixel.  If we don't do this here the script
			would run much slower.
			*/
			var dragConts = DragDrops[dragObj];

			/*
			first record the width/height of our drag item.  Then hide it since
			it is going to (potentially) be moved out of its parent.
			*/
			curTarget.setAttribute('startWidth',  parseInt(curTarget.offsetWidth));
			curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));
			curTarget.style.display  = 'none';

			// loop through each possible drop container
			for(var i=0; i<dragConts.length; i++){
				with(dragConts[i]){
					var pos = getPosition(dragConts[i]);

					/*
					save the width, height and position of each container.

					Even though we are saving the width and height of each
					container back to the container this is much faster because
					we are saving the number and do not have to run through
					any calculations again.  Also, offsetHeight and offsetWidth
					are both fairly slow.  You would never normally notice any
					performance hit from these two functions but our code is
					going to be running hundreds of times each second so every
					little bit helps!

					Note that the biggest performance gain here, by far, comes
					from not having to run through the getPosition function
					hundreds of times.
					*/
					setAttribute('startWidth',  parseInt(offsetWidth));
					setAttribute('startHeight', parseInt(offsetHeight));
					setAttribute('startLeft',   pos.x);
					setAttribute('startTop',    pos.y);
				}

				// loop through each child element of each container
				for(var j=0; j<dragConts[i].childNodes.length; j++){
					with(dragConts[i].childNodes[j]){
						if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;

						var pos = getPosition(dragConts[i].childNodes[j]);

						// save the width, height and position of each element
						setAttribute('startWidth',  parseInt(offsetWidth));
						setAttribute('startHeight', parseInt(offsetHeight));
						setAttribute('startLeft',   pos.x);
						setAttribute('startTop',    pos.y);
					}
				}
			}
		}
	}

	// If we get in here we are dragging something
	if(curTarget){
		// move our helper div to wherever the mouse is (adjusted by mouseOffset)
		dragHelper.style.top  = mousePos.y - mouseOffset.y;
		dragHelper.style.left = mousePos.x - mouseOffset.x;

		var dragConts  = DragDrops[curTarget.getAttribute('DragObj')];
		var activeCont = null;

		var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);
		var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);

		// check each drop container to see if our target object is "inside" the container
		for(var i=0; i<dragConts.length; i++){
			with(dragConts[i]){
				if(((getAttribute('startLeft'))                               < xPos) &&
					((getAttribute('startTop'))                                < yPos) &&
					((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) &&
					((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){

						/*
						our target is inside of our container so save the container into
						the activeCont variable and then exit the loop since we no longer
						need to check the rest of the containers
						*/
						activeCont = dragConts[i];

						// exit the for loop
						break;
				}
			}
		}

		// Our target object is in one of our containers.  Check to see where our div belongs
		if(activeCont){
			// beforeNode will hold the first node AFTER where our div belongs
			var beforeNode = null;

			// loop through each child node (skipping text nodes).
			for(var i=activeCont.childNodes.length-1; i>=0; i--){
				with(activeCont.childNodes[i]){
					if(nodeName=='#text') continue;

					// if the current item is "After" the item being dragged
					if(
						curTarget != activeCont.childNodes[i]                              &&
						((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) &&
						((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){
							beforeNode = activeCont.childNodes[i];
					}
				}
			}

			// the item being dragged belongs before another item
			if(beforeNode){
				if(beforeNode!=curTarget.nextSibling){
					activeCont.insertBefore(curTarget, beforeNode);
				}

			// the item being dragged belongs at the end of the current container
			} else {
				if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){
					activeCont.appendChild(curTarget);
				}
			}

			// make our drag item visible
			if(curTarget.style.display!=''){
				curTarget.style.display  = '';
			}
		} else {

			// our drag item is not in a container, so hide it.
			if(curTarget.style.display!='none'){
				curTarget.style.display  = 'none';
			}
		}
	}

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// mouseMove target
	lastTarget  = target;

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// this helps prevent items on the page from being highlighted while dragging
	return false;
}

function mouseUp(ev){
	if(curTarget){
		// hide our helper object - it is no longer needed
		dragHelper.style.display = 'none';

		// if the drag item is invisible put it back where it was before moving it
		if(curTarget.style.display == 'none'){
			if(rootSibling){
				rootParent.insertBefore(curTarget, rootSibling);
			} else {
				rootParent.appendChild(curTarget);
			}
		}

		// make sure the drag item is visible
		curTarget.style.display = '';
	}
	curTarget  = null;
	iMouseDown = false;
}

function mouseDown(){
	iMouseDown = true;
	if(lastTarget){
		return false;
	}
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

window.onload = function(){
	// Create our helper object that will show the item while dragging
	dragHelper = document.createElement('DIV');
	dragHelper.style.cssText = 'position:absolute;display:none;';
		
	CreateDragContainer(
		document.getElementById('DragContainer1'),
		document.getElementById('DragContainer2'),
		document.getElementById('DragContainer3')
	);

	document.body.appendChild(dragHelper);
}

</script>

<!--the mouse over and dragging class are defined on each item-->

<div class="DragContainer" id="DragContainer1">
	<div class="DragBox" id="Item1"  overClass="OverDragBox" dragClass="DragDragBox">Item #1</div>
	<div class="DragBox" id="Item2"  overClass="OverDragBox" dragClass="DragDragBox">Item #2</div>
	<div class="DragBox" id="Item3"  overClass="OverDragBox" dragClass="DragDragBox">Item #3</div>
	<div class="DragBox" id="Item4"  overClass="OverDragBox" dragClass="DragDragBox">Item #4</div>
</div>
<div class="DragContainer" id="DragContainer2">
	<div class="DragBox" id="Item5"  overClass="OverDragBox" dragClass="DragDragBox">Item #5</div>
	<div class="DragBox" id="Item6"  overClass="OverDragBox" dragClass="DragDragBox">Item #6</div>
	<div class="DragBox" id="Item7"  overClass="OverDragBox" dragClass="DragDragBox">Item #7</div>
	<div class="DragBox" id="Item8"  overClass="OverDragBox" dragClass="DragDragBox">Item #8</div>
</div>
<div class="DragContainer" id="DragContainer3">
	<div class="DragBox" id="Item9"  overClass="OverDragBox" dragClass="DragDragBox">Item #9</div>
	<div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div>
	<div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div>
	<div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox
分享到：
| [转]悟透JavaScript
评论
1 楼 lauphai 2010-12-31  
/articleimg/2006/07/3791/drag_drop.js
这个没有啊。。。。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    [实例讲解]怎么用javascript进行拖拽

    [实例讲解]怎么用javascript进行拖拽

    JavaScript鼠标拖拽

    JavaScript鼠标拖拽功能是网页交互中的一个重要组成部分，它允许用户通过鼠标操作页面上的元素，例如移动、缩放或旋转对象。对于初学者来说，理解并实现这一功能是掌握JavaScript动态效果的一个重要步骤。 首先，...

    简易而又灵活的Javascript拖拽框架

    JavaScript拖拽框架是一种用于创建交互式用户界面的技术，它允许用户通过鼠标或其他输入设备将元素在屏幕上自由移动，常用于构建可自定义的GUI组件、拖放功能等。本篇文章将详细探讨“简易而又灵活的Javascript拖拽...

    怎么用javascript进行拖拽2

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]你会注意到这个代码几乎是前面的全集，将前面的合在一起就实现了拖拽效果了． 当我们点击一个item时，我们就获取了很多变量，如鼠标位置，鼠标位置自然就包含了那个...

    javascript js拖拽缩放

    javascript js拖拽缩放 可以任意缩小放大

    JavaScript图片拖动效果

    在JavaScript中实现图片拖动效果是一项常见的交互设计技术，它能增强用户在网页上的操作体验。这个技术主要基于HTML5的拖放API（Drag and Drop API），通过JavaScript事件监听和处理来实现。以下是对这一技术的详细...

    原生javascript实现拖拽改变table表格行高（html）

    通过查看和分析这个文件，你可以更深入地了解如何用原生JavaScript实现拖拽改变表格行高的具体细节。 最后，这样的功能可以广泛应用于数据展示、编辑表格等场景，让用户可以根据需要自由调整表格的布局，提高其在...

    javascript可拖动的日历

    在IT领域，JavaScript是一种广泛使用的客户端脚本语言，主要用于增强网页的交互性和动态性。本文将深入探讨如何利用JavaScript实现一个可拖动的日历组件，同时结合提供的标签"javascript"和"日历"来解析这一技术。 ...

    javascript 分页拖拽效果

    用javascript实现的分页 可以拖拽 超炫

    纯javascript 完美 无障碍层拖拽

    "javascript 层拖拽"这两个标签进一步明确了主题，强调我们将专注于JavaScript编程语言，特别是如何用它来实现可拖动的页面层或元素。 【文件解析】 "js拖拽+很强悍.html"这个文件名可能是一个包含示例代码和演示的...

    JavaScript可拖动DIV

    JavaScript可拖动DIV是一种常见的网页交互功能，它允许用户通过鼠标拖动来改变网页上某个元素（通常是div）的位置。这种技术在构建交互式界面、拖放式操作、地图应用等场景中非常常见。在本篇文章中，我们将深入探讨...

    【JavaScript源代码】JavaScript实现拖动滑块拼图验证功能（html5、canvas）.docx

    JavaScript实现的拖动滑块拼图验证功能是一种常见的安全验证机制，它被广泛应用于网站登录、注册等场景，以防止自动化的机器人或恶意攻击。这种验证方式要求用户手动将一个可拖动的图像块（通常是滑块）拖动到正确的...

    javaScript实现DIV简单拖拽

    javaScript实现DIV简单拖拽

    javascript拖拽图片到指定位置

    以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先，我们需要理解拖放（Drag and Drop）的概念。拖放是Web开发中的一个功能，允许用户通过鼠标或触摸设备抓取元素并将其移动到另一位置。在HTML5中，这个...

    基于javascript的拖拽类封装详解

    在JavaScript编程中，拖拽功能是一项常见的交互设计，它能够增强用户的体验，使得网页元素更加易用和直观。本文将详细解析如何封装一个基于JavaScript的拖拽类，以实现包括旋转、缩放和平移在内的多项功能。 首先，...

    javascript无刷新窗口，鼠标壳拖动窗口位置

    在JavaScript编程中，实现无刷新窗口以及允许用户通过鼠标拖动窗口位置的技术是现代Web应用中常见的需求。这种功能能够提供更加流畅和交互性强的用户体验，尤其适用于弹出框、对话框或者浮动面板等元素。以下是对这...

    javascript 购物车(图片拖动)

    【标题】：“JavaScript 购物车（图片拖动）” 在Web开发中，实现一个交互性强、用户体验良好的购物车功能是一项重要的任务。这个“JavaScript 购物车（图片拖动）”项目，旨在教你如何利用JavaScript实现一个允许...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    在IT行业中，JavaScript是一种广泛使用的前端编程语言，而jQuery（简称JQ）是基于JavaScript的库，极大地简化了DOM操作、事件处理以及动画效果。在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序...

    JavaScript-拖拽画直线

    JavaScript-拖拽画直线

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...

Magicbox
Global site tag (gtag.js) - Google Analytics