Home > Developer > JavaScript
Recently on the Internet to see some friends everywhere looking similar to Google's personality homepage and MSN Space Drag implementation, in the next just also found an example. But there are more problems. I rewrote it and perfected it, and built a universal function. The specific function is implemented as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>blacksoul drag-and-drop demo</title>
<!--
____________________________________
|--------Author by Blacksoul---------|
|------------2006.03.30--------------|
|--------BlackSoulylk@gmail.com------|
|------------qq:9136194--------------|
|------http://blacksoul.cnblogs.cn---|
======================================
-->
<style type= "Text/css" >
Body
{
margin:0px;
}
#aim/* Set Target layer style * *
{
position:absolute;/* the position of the control layer must be style*/
width:200px;
height:30px;
border:1px solid #666666;
Background-color: #FFCCCC;
}
#sourceLayer, #cloneLayer
{
position:absolute;/* the position of the control layer must be style*/
width:300px;
height:50px;
border:1px solid #666666;
Background-color: #CCCCCC;
Cursor:move;
}
. docked
{
Display:none;
Filter:alpha (opacity=100);
}
. actived
{
Display:block;
Filter:alpha (opacity=70);
}
</style>
<body >
<div id= "aim" > Placement scope </div>
<div id= "Sourcelayer" unselectable= "Off" > drag demo Source </div>
<div id= "Clonelayer" class= "docked" unselectable= "off" ></div>
<script type= "Text/javascript" language= "JavaScript" >
<!--
/*
====================================
|--------Author by Blacksoul---------|
|------------2006.03.30--------------|
|--------BlackSoulylk@gmail.com------|
|------------qq:9136194--------------|
|------http://blacksoul.cnblogs.cn---|
====================================
*/
Setting Layer Objects
var aim;
var Sourcelayer;
var Clonelayer;
Define the initial position of each layer
var aimx;
var Aimy;
var Orgnx;
var Orgny;
Drag the variable in the process
var draging = false; Is it in the drag
var OffsetX = 0; X direction left and right offset
var OffsetY = 0; Y-direction up and down offsets
var back; Return Animation Object
var Thisx; X position of current clone layer
var Thisy; Y position of current clone layer
var time;
var stepx; Displacement speed
var stepy; Displacement speed
Initializing drag and drop information
/*
INITAIMX Target x coordinates
Initaimy Target y-coordinate
Initorgnx drag source x coordinates
Initorgny drag source Y coordinate
*/
Get Layer Object
function Getlayer (inaim,insource,inclone)
{
Aim = document.getElementById (Inaim);
Sourcelayer = document.getElementById (Insource);
Clonelayer = document.getElementById (Inclone);
}
function Initdrag (Initaimx,initaimy,initorgnx,initorgny)
{
Aimx = Initaimx;
Aimy = Initaimy;
Orgnx = Initorgnx;
Orgny = Initorgny;
Set the position of each start layer
Aim.style.pixelLeft = Aimx;
Aim.style.pixelTop = Aimy;
SourceLayer.style.pixelLeft = Orgnx;
SourceLayer.style.pixelTop = Orgny;
CloneLayer.style.pixelLeft = Orgnx;
CloneLayer.style.pixelTop = Orgny;
}
Ready to drag
function Beforedrag ()
{
if (Event.button!= 1)
{
Return
}
clonelayer.innerhtml = sourcelayer.innerhtml; Copy drag source content
OffsetX = Document.body.scrollLeft + event.clientx-sourcelayer.style.pixelleft;
OffsetY = Document.body.scrollTop + event.clienty-sourcelayer.style.pixeltop;
Clonelayer.classname = "actived";
Draging = true;
}
Drag in
function Ondrag ()
{
if (!draging)
{
Return
}
Update location
Event.returnvalue = false;
CloneLayer.style.pixelLeft = Document.body.scrollLeft + event.clientx-offsetx;
CloneLayer.style.pixelTop = Document.body.scrollTop + event.clienty-offsety;
}
End drag
function EndDrag ()
{
if (Event.button!= 1)
{
Return
}
Draging = false;
if (event.clientx >= aim.style.pixelLeft && event.clientx <= (Aim.style.pixelLeft + aim.offsetwidth) & &
Event.clienty >= aim.style.pixelTop && event.clienty <= (Aim.style.pixelTop + aim.offsetheight))
{
Drag-and-drop layer is in target, automatically positioned to target location
SourceLayer.style.pixelLeft = Aim.style.pixelLeft;
SourceLayer.style.pixelTop = Aim.style.pixelTop;
Clonelayer.classname = "docked";
/*
* * You can save the current location with XML after this is done.
* * Next time the user enters
* * Drag the layer into the XML data on the initialization source
*/
}
Else
{
Drag and drop at the target layer to restore the drag source position
THISX = CloneLayer.style.pixelLeft;
Thisy = CloneLayer.style.pixelTop;
OffSetX = Math.Abs (THISX-ORGNX);
OffSetY = Math.Abs (Thisy-orgny);
Time = 500;//Set animation times
STEPX = Math.floor ((offsetx/time) *20);
Stepy = Math.floor ((offsety/time) *20);
if (stepx = 0)
STEPX = 2;
if (stepy = 0)
Stepy = 2;
Start returning animation
MoveStart ();
}
}
function MoveStart ()
{
back = SetInterval ("Movelayer ();", 15);
}
Set the animation effect returned
function Movelayer ()
{
Located on the left of the target
if (cloneLayer.style.pixelLeft <= orgnx && cloneLayer.style.pixelTop <= Orgny)
{
CloneLayer.style.pixelLeft + = stepx;
CloneLayer.style.pixelTop + = Stepy;
If the displacement exceeds the target, set the speed to pix. And move back in the opposite direction. The spring effect is achieved here.
if (CloneLayer.style.pixelLeft > Orgnx)
{
STEPX = 1;
}
if (CloneLayer.style.pixelTop > Orgny)
{
Stepy = 1;
}
No displacement occurs on the X or Y axis with the same coordinates
if (CloneLayer.style.pixelLeft = = Orgnx)
{
stepx = 0;
}
if (CloneLayer.style.pixelTop = = Orgny)
{
stepy = 0;
}
if (CloneLayer.style.pixelLeft = = Orgnx && CloneLayer.style.pixelTop = = Orgny)
{
Endmove ();
}
}
Located at lower left of target
else if (cloneLayer.style.pixelLeft <= orgnx && cloneLayer.style.pixelTop >= Orgny)
{
CloneLayer.style.pixelLeft + = stepx;
CloneLayer.style.pixelTop-= stepy;
if (CloneLayer.style.pixelLeft > Orgnx)
{
STEPX = 1;
}
if (CloneLayer.style.pixelTop < Orgny)
{
Stepy = 1;
}
if (CloneLayer.style.pixelLeft = = Orgnx)
{
stepx = 0;
}
if (CloneLayer.style.pixelTop = = Orgny)
{
stepy = 0;
}
if (CloneLayer.style.pixelLeft = = Orgnx && CloneLayer.style.pixelTop = = Orgny)
{
Endmove ();
}
}
Located on the right of the target
else if (cloneLayer.style.pixelLeft >= orgnx && cloneLayer.style.pixelTop <= Orgny)
{
CloneLayer.style.pixelLeft-= stepx;
CloneLayer.style.pixelTop + = Stepy;
if (CloneLayer.style.pixelLeft < ORGNX)
{
STEPX = 1;
}
if (CloneLayer.style.pixelTop > Orgny)
{
Stepy = 1;
}
if (CloneLayer.style.pixelLeft = = Orgnx)
{
stepx = 0;
}
if (CloneLayer.style.pixelTop = = Orgny)
{
stepy = 0;
}
if (CloneLayer.style.pixelLeft = = Orgnx && CloneLayer.style.pixelTop = = Orgny)
{
Endmove ();
}
}
Located on the right of the target
else if (cloneLayer.style.pixelLeft >= orgnx && cloneLayer.style.pixelTop >= Orgny)
{
CloneLayer.style.pixelLeft-= stepx;
CloneLayer.style.pixelTop-= stepy;
if (CloneLayer.style.pixelLeft < ORGNX)
{
STEPX = 1;
}
if (CloneLayer.style.pixelTop < Orgny)
{
Stepy = 1;
}
if (CloneLayer.style.pixelLeft = = Orgnx)
{
stepx = 0;
}
if (CloneLayer.style.pixelTop = = Orgny)
{
stepy = 0;
}
if (CloneLayer.style.pixelLeft = = Orgnx && CloneLayer.style.pixelTop = = Orgny)
{
Endmove ();
}
}
Reach the target
Else
{
Endmove ();
}
}
Stop returning animation
function Endmove ()
{
SourceLayer.style.pixelLeft = Orgnx;
SourceLayer.style.pixelTop = Orgny;
CloneLayer.style.pixelLeft = Orgnx;
CloneLayer.style.pixelTop = Orgny;
Clonelayer.classname = "docked";
Clearinterval (back);
}
Main drag function
function startdraging (Inaim,insource,inclone,initaimx,initaimy,initorgnx,initorgny)
{
Getlayer (Inaim,insource,inclone)
Initdrag (Initaimx,initaimy,initorgnx,initorgny);
Sourcelayer.onmousedown = Beforedrag;
Document.onmousemove = Ondrag; Here if use Clonelayer, in drag and drop will select Clonelayer inside content, and then appear some bugs ...
Clonelayer.onmouseup = EndDrag;
}
Call
Startdraging ("Aim", "Sourcelayer", "Clonelayer", 300,200,20,20);
-->
</script>
</body>
It is to be noted that:
The definition of DIV in HTML requires three. Three layers must define style position as absolute to control position
1. Target layer (AIM), the main role is to define the location of drag-and-drop.
2. Drag-and-drop source (sourcelayer). Note Setting the property unselectable = "Off" (this is odd, setting the on range will select the layer during the drag process)
3. Layer for Replication (clonelayer).
Two. Call to function
Startdraging parameter Explanation:
Initaim Target Layer name Initsource Drag the source name Initclone the name of the layer used for replication
INITAIMX target layer x axis coordinate initaimy target layer y coordinate INITORGNX drag source x coordinate Initorgny drag source y axis coordinate
Only IE inside the test through. The code adds a comment. You can add an operation that writes XML after dragging the source to the destination. It also records the user-defined page layout data. The algorithm for returning animation is not very satisfying. I hope you will make some suggestions. I'm currently working on a set of Ajax controls based on asp.net2.0. . Hope to have a lot of exchanges.
PS: The first article in my blog park. Hope a lot of support.
Http://blacksoul.cnblogs.com/archive/2006/03/31/363463.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
