HTML code section <!doctype html><script src= ". /js/jquery-1.11.1.js "></script>
The part that needs to be dragged plus the positioning property
jquery Code section <script>//mouse Drag effect (function ($) {$.fn.wwp_tz = function (opt) { var defaults = {}; var options = $.extend ({},defaults,opt); This.each (function () {var $this = $ (this); var l=0,t=0; $this. MouseDown (function (event) {$this. Data ("Down", "1"); var X = Event.clientx; Gets the x-axis of the current mouse; var Y = Event.clienty; Gets the y-axis of the current mouse; var offset = $this. Offset (); var box_x = Offset.left; Gets the x-axis floating distance of the current element; var box_y = offset.top; Gets the y-axis floating distance of the current element; L = x-box_x; The distance between the current mouse and the element; T = y-box_y; }). MouseMove (function (event) {if ($this. Data ("Down") = = 1) {var X = Event.clientx; Gets the x-axis of the current mouse; var Y = Event.clienty; Gets the y-axis of the current mouse; var box_left = x-l; The current position of the mouse minus the mouse-to-element position var box_top = y-t; if (options.dom = = 1) {$this. css ({left:box_left+ "px", top:box_top+ "px"}) }else if (options.dom = = 2) {$this. Parent (). CSS ({left:box_left+ "px", top:b ox_top+ "px"})}}else{return FAL Se }}). MouseUp (function () {///mouse $this when lifted. Data ("Down", "1"); }). MouseLeave (function () {///cursor $this when leaving element. Data ("Down", "1"); }); })}}) (JQuery); Call $ (function () {$ (". a"). Wwp_tz ({dom:2//1 is the element itself dragged, and 2 is dragged with the parent node }) }); </script>
jquery mouse drag and drop effect sharing