This article illustrates the drag-and-drop effect of jquery implementation. Share to everyone for your reference, specific as follows:
The screenshot of the running effect is as follows:
Click here to view the online demo effect.
The specific code is as follows:
HTML section:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
< html>
jquery section:
(function () {$.fn.extend {tuoz:function () {return This.each (function () {var $this =$ (this);
var ey= "";
var ex= "";
var mx= "";
var my= "";
var tx= "";
var ty= "";
var small_x= "";
var small_y= "";
var big_height= "";
var big_width= "";
var big_x= "";
var big_y= "";
var move= "false";
$this. MouseDown (function (e) {move= "true";
mx= $this. Offset (). Left;
my= $this. Offset (). Top;
Ex=e.clientx;
Ey=e.clienty;
TX=EX-MX;
Ty=ey-my;
small_x=$ ("#big"). Offset (). Left;
small_y=$ ("#big"). Offset (). Top;
big_height=$ ("#big"). Height ();
big_width=$ ("#big"). width ();
Big_x=small_x+big_width;
Big_y=small_y+big_height;
}) $ (document). MouseMove (function (e) {ex=e.clientx;
Ey=e.clienty;
if (move== "true") {$this. Offset ({left:ex-tx,top:ey-ty});
}) $this. MouseUp (function (e) {move=false;
Ex=e.clientx;
Ey=e.clienty; if (Ex>=small_X && ey>=small_y && ex<=big_x && ey<=big_y) {$ ("#big"). Append ($this. html ());
$this. Offset ({left:mx,top:my});
})}}) (JQuery)
Full instance code click here to download the site.
For more information about jquery effects and tips, readers who are interested in this site can view the topic: "jquery Common classic Effects Summary"
I hope this article will help you with the jquery program design.