层的拖动有关问题

2012-03-08

层的拖动问题如何实现层的拖动，类似“3721”的效果，拖动后其它的层能够换位置。谢谢！[解决办法]这里有一个我

层的拖动问题
如何实现层的拖动，类似“3721”的效果，拖动后其它的层能够换位置。
谢谢！

[解决办法]
这里有一个我写的例子，自己看吧

<style type= "text/css ">
body{
margin:0;
padding:10px;
}
div.big {
border:solid 1px #999999;
clear:both;
width:500px;
height:150px;
margin:0 0 10px 0;
}
div.small {
border:solid 1px #999999;
float:left;
width:245px;
height:50px;
margin:0 10px 10px 0;
}
div.miniroom {
border:solid 1px #999999;
clear:both;
width:500px;
height:200px;
margin:0 0 10px 0;
}
div.dragger {
position:absolute;
z-index:999;
filter:alpha(Opacity=80);
background:gray;
}

div#container {
width:530px;
padding:0px;
}

div.floatleft{
float:left;
}
div.floatright{
float:right;
}
</style>
<body>
<div id= "container " style= "width:800px ">
<div id= "smallcolumn " class= "floatleft " style= "width:250px ">
<div id= "sample5 " class= "small " style= "background:green;height:300px ">
用户信息 </div>
<div id= "sample6 " class= "small " style= "background:brown ">
知己关系 </div>
<div id= "sample7 " class= "small " style= "background:orange ">
最新访客 </div>
</div>
<div id= "bigcolumn " class= "floatleft " style= "width:530px ">
<div id= "sample1 " class= "big " style= "background:red ">
封面故事 </div>
<div id= "sample2 " class= "miniroom " style= "background:gray ">
miniroom </div>
<div id= "sample3 " class= "small " style= "background:yellow ">
最新留言 </div>
<div id= "sample4 " class= "small " style= "background:blue ">
最新评论 </div>
</div>
</div>
<div style= "position:absolute;right:0;top:150px;width:200px;height:100px;border:solid 1px

black;padding:6px;background:white; ">
<label> 页面布局 </label> <hr size= "1 "/>
<input name= "position " type= "radio " value= "floatleft " onclick= "changePos(this.value) " /> 左小右大
<input name= "position " type= "radio " value= "floatright " onclick= "changePos(this.value) " /> 左大右小
</div>
</body>

<script type= "text/javascript ">
var currentPane = null;
function paneClass(id,source,container,isMiniroom){
this.id = id?id:null;
this.target = null;
this.source = null;
this.flagMoving = false;
this.isMiniroom = (isMiniroom == true)?true:false;
this.container = container;
this.classBig = "big ";
this.classSmall = "small ";
this.classFloatLeft = "floatleft ";
this.classMiniroom = "miniroom ";
this.initClass = source.className;
this.clickTime = 0;
this.initPane(source);
}

paneClass.prototype = {
initPane:function(source){
var temp = this;
this.paneHandler = source;
this.paneHandler.attachEvent( "onmousedown ",function(){return temp.startMove();});
},

startMove:function(){
var e = window.event;

if(!this.flagMoving){
if(this.source){
this.source.removeNode(true);
this.source = null;
}
var temp = this;
var tempPane = this.paneHandler;
var tempSource = tempPane.cloneNode(true);
this.source = tempSource;
this.initX = container.offsetLeft + this.container.offsetLeft + tempPane.offsetLeft+5;
this.initY = container.offsetTop + this.container.offsetTop + tempPane.offsetTop+5;
this.container.insertBefore(tempSource,tempPane);
tempPane.className += " dragger ";
tempPane.style.left = this.initX+ "px ";
tempPane.style.top = this.initY+ "px ";
this.startX = e.x;
this.startY = e.y;
this.flagMoving = true;
this.paneHandler.style.cursor = "move ";
tempPane.attachEvent( "onmousemove ",function(){return temp.move();});
tempPane.attachEvent( "onmouseout ",function(){return temp.stopMove();});
tempPane.attachEvent( "onmouseup ",function(){return temp.stopMove();});
tempPane.attachEvent( "onselectstart ",function(){return false;});
}
return true;
},

move:function(){
if(this.source!=null){
var tempPane = this.paneHandler;
var e = window.event;
if(this.flagMoving){
tempPane.style.left = (this.initX+e.x - this.startX) + "px ";
tempPane.style.top = (this.initY+e.y - this.startY) + "px ";
}
}
return true;
},

stopMove:function(){
if(this.source != null){
var temp = this;
var tempPane = this.paneHandler;
var skipNum = 0;
this.flagMoving = false;
tempPane.style.cursor = "default ";
if(smallColumn.className == this.classFloatLeft){
this.container = (bigColumn.offsetLeft+container.offsetLeft > tempPane.offsetLeft)?

smallColumn:bigColumn;
}else{
this.container = (smallColumn.offsetLeft+container.offsetLeft > tempPane.offsetLeft)?

bigColumn:smallColumn;
}
if(this.isMiniroom){
this.container = bigColumn;
}
var loopTimes = this.container.childNodes.length;
for(i=0;i <loopTimes;i++){
var target = this.container.childNodes[i];
var targetLeft = container.offsetLeft+target.offsetLeft+this.container.offsetLeft;
var targetTop = container.offsetTop+target.offsetTop+this.container.offsetTop;
if(target.id == tempPane.id || target == tempPane || targetLeft+target.offsetWidth <

tempPane.offsetLeft || targetTop+target.offsetHeight < tempPane.offsetTop){
skipNum++;
continue;
}else if(!this.isMiniroom || this.container != smallColumn){
tempPane.className = this.initClass;
if(this.container == smallColumn){
tempPane.className = this.classSmall;
}
this.container.insertBefore(tempPane,target);
this.source.removeNode(true);
this.source = null;
break;
}
}
if(this.source != null){
tempPane.className = this.initClass;
if(skipNum > 0 && tempPane != this.container.lastChild && this.source !=

this.container.lastChild){
if(!this.isMiniroom ){
tempPane.className = (this.container == smallColumn)?

this.classSmall:this.initClass;
}
if(!this.isMiniroom || this.container != smallColumn){
var insertPane = tempPane.cloneNode(true);
this.container.appendChild(insertPane);
tempPane.removeNode(true);
this.initPane(insertPane);
}
}
this.source.removeNode(true);

this.source = null;
}
}
return true;
}
}

function changePos(newPos){
document.getElementById( "smallcolumn ").className = newPos;
document.getElementById( "bigcolumn ").className = newPos;
}

var classname = document.getElementById( "smallcolumn ").className;
var posRadios = document.getElementsByName( "position ");
var smallColumn = document.getElementById( "smallcolumn ");
var container = document.getElementById( "container ");
var bigColumn = document.getElementById( "bigcolumn ");
var dragger1 = new paneClass( "dragger1 ",document.getElementById( "sample1 "),bigColumn,false);
var dragger2 = new paneClass( "dragger2 ",document.getElementById( "sample2 "),bigColumn,true);
var dragger3 = new paneClass( "dragger3 ",document.getElementById( "sample3 "),bigColumn,false);
var dragger4 = new paneClass( "dragger4 ",document.getElementById( "sample4 "),bigColumn,false);
var dragger6 = new paneClass( "dragger6 ",document.getElementById( "sample6 "),smallColumn,false);
var dragger7 = new paneClass( "dragger7 ",document.getElementById( "sample7 "),smallColumn,false);
for(i=0;i <posRadios.length;i++){
posRadios[i].checked = (posRadios[i].value == classname)?true:false;
}
</script>
[解决办法]
http://joesen.f2blog.com/read-564.html
http://www.hxblog.net/article.asp?id=881
[解决办法]
17.4.2. Example: Dragging Document Elements
Now that event propagation, event-handler registration, and the various event object interfaces for the DOM Level 2 and the IE event models have all been covered, it 's time to put them together in a practical example. Example 17-4 shows a JavaScript function, drag( ), that, when invoked from a mousedown event handler, allows an absolutely positioned document element to be dragged by the user. drag( ) works with both the DOM and IE event models.

drag( ) takes two arguments. The first is the element that is to be dragged. This may be the element on which the mousedown event occurred or a containing element (e.g., you might allow the user to drag on the titlebar of a window to move the entire window). In either case, however, it must refer to a document element that is absolutely positioned using the CSS position attribute. The second argument is the event object associated with the triggering mousedown event.

drag( ) records the position of the mousedown event and then registers event handlers for the mousemove and mouseup events that follow the mousedown event. The handler for the mousemove event is responsible for moving the document element, and the handler for the mouseup event is responsible for deregistering itself and the mousemove handler. It is important to note that the mousemove and mouseup handlers are registered as capturing event handlers because the user may move the mouse faster than the document element can follow it, and some of these events occur outside the original target element. Without capturing, the events may not be dispatched to the correct handlers. Also, note that the moveHandler( ) and upHandler( ) functions that are registered to handle these events are defined as functions nested within drag( ). Because they are defined in this nested scope, they can use the arguments and local variables of drag( ), which considerably simplifies their implementation.

Example 17-4. Dragging document elements
/**
* Drag.js: drag absolutely positioned HTML elements.
*
* This module defines a single drag( ) function that is designed to be called

* from an onmousedown event handler. Subsequent mousemove events will
* move the specified element. A mouseup event will terminate the drag.
* If the element is dragged off the screen, the window does not scroll.
* This implementation works with both the DOM Level 2 event model and the
* IE event model.
*
* Arguments:
*
* elementToDrag: the element that received the mousedown event or
* some containing element. It must be absolutely positioned. Its
* style.left and style.top values will be changed based on the user 's
* drag.
*
* event: the Event object for the mousedown event.
**/
function drag(elementToDrag, event) {
// The mouse position (in window coordinates)
// at which the drag begins
var startX = event.clientX, startY = event.clientY;

// The original position (in document coordinates) of the
// element that is going to be dragged. Since elementToDrag is
// absolutely positioned, we assume that its offsetParent is the
// document body.
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

// Even though the coordinates are computed in different
// coordinate systems, we can still compute the difference between them
// and use it in the moveHandler( ) function. This works because
// the scrollbar position never changes during the drag.
var deltaX = startX - origX, deltaY = startY - origY;

// Register the event handlers that will respond to the mousemove events
// and the mouseup event that follow this mousedown event.
if (document.addEventListener) { // DOM Level 2 event model
// Register capturing event handlers
document.addEventListener( "mousemove ", moveHandler, true);
document.addEventListener( "mouseup ", upHandler, true);
}
else if (document.attachEvent) { // IE 5+ Event Model
// In the IE event model, we capture events by calling
// setCapture( ) on the element to capture them.
elementToDrag.setCapture( );
elementToDrag.attachEvent( "onmousemove ", moveHandler);
elementToDrag.attachEvent( "onmouseup ", upHandler);
// Treat loss of mouse capture as a mouseup event.
elementToDrag.attachEvent( "onlosecapture ", upHandler);
}
else { // IE 4 Event Model
// In IE 4 we can 't use attachEvent( ) or setCapture( ), so we set
// event handlers directly on the document object and hope that the
// mouse events we need will bubble up.
var oldmovehandler = document.onmousemove; // used by upHandler( )
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}

// We 've handled this event. Don 't let anybody else see it.
if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2
else event.cancelBubble = true; // IE
//下接
[解决办法]

// Now prevent any default action.
if (event.preventDefault) event.preventDefault( ); // DOM Level 2
else event.returnValue = false; // IE

/**
* This is the handler that captures mousemove events when an element
* is being dragged. It is responsible for moving the element.
**/
function moveHandler(e) {
if (!e) e = window.event; // IE Event Model

// Move the element to the current mouse position, adjusted as

// necessary by the offset of the initial mouse-click.
elementToDrag.style.left = (e.clientX - deltaX) + "px ";
elementToDrag.style.top = (e.clientY - deltaY) + "px ";

// And don 't let anyone else see this event.
if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2
else e.cancelBubble = true; // IE
}

/**
* This is the handler that captures the final mouseup event that
* occurs at the end of a drag.
**/
function upHandler(e) {
if (!e) e = window.event; // IE Event Model

// Unregister the capturing event handlers.
if (document.removeEventListener) { // DOM event model
document.removeEventListener( "mouseup ", upHandler, true);
document.removeEventListener( "mousemove ", moveHandler, true);
}
else if (document.detachEvent) { // IE 5+ Event Model
elementToDrag.detachEvent( "onlosecapture ", upHandler);
elementToDrag.detachEvent( "onmouseup ", upHandler);
elementToDrag.detachEvent( "onmousemove ", moveHandler);
elementToDrag.releaseCapture( );
}
else { // IE 4 Event Model
// Restore the original handlers, if any
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}

// And don 't let the event propagate any further.
if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2
else e.cancelBubble = true; // IE
}
}

The following code shows how you can use drag( ) in an HTML file (it 's a simplified version of Example 16-3, with the addition of dragging):

<script src= "Drag.js "> </script> 

<div style= "position:absolute; left:100px; top:100px; width:250px;
background-color: white; border: solid black; ">

<div style= "background-color: gray; border-bottom: dotted black;
padding: 3px; font-family: sans-serif; font-weight: bold; "
onmousedown= "drag(this.parentNode, event); ">
Drag Me 
</div>

<p> This is a test. Testing, testing, testing. <p> This is a test. <p> Test.
</div>

The key here is the onmousedown attribute of the inner <div> element. Although drag( ) uses the DOM and IE event models internally, it 's registered here using the Level 0 model for convenience.

Here 's another simple example that uses drag( ); it defines an image that the user can drag if the Shift key is held down:

<script src= "Drag.js "> </script>
<img src= "draggable.gif " width= "20 " height= "20 "
style= "position:absolute; left:0px; top:0px; "
onmousedown= "if (event.shiftKey) drag(this, event); ">

热点排行