Home >Web Front-end >JS Tutorial >jquery draggable form control implementation code_jquery

jquery draggable form control implementation code_jquery

WBOYOriginal: 2016-05-16 18:31:45967browse

So the JQUERY framework needs to be introduced.
Just put my control code into a js file and import it directly
Control code

Copy code The code is as follows:

 
$.fn.myDrag = function() { 
var self = $(this); 
self.css("position", "absolute"); 
var p = self.position(); 
self.css({ left: p.left, top: p.top }); 
self.mousedown( 
function(event) { 
// debugger; 
self.data("ifDary", "true"); //Save the state to indicate whether dragging is possible
// debugger; 
var selfLeft = event.pageX - parseInt (self.css("left")); //Calculate the left of the mouse to this element 
var selfTop = event.pageY - parseInt(self.css("top")); //Calculate the mouse to this The top of the element 
self.data("selfLeft", selfLeft); //Save coordinate information 
self.data("selfTop", selfTop); 
} 
); 
$( document).mouseup( 
function() { 
self.data("ifDary", "false"); 
//Prevent the form from flying outside
var bWidth = $(window) .width(); 
var bHeight = $(window).height(); 
var currentleft = parseInt(self.css("left")); 
var currenttop = parseInt(self.css( "top")); 
if (currentleft <= 0) 
currentleft = 0; 
if (currentleft >= bWidth) 
currentleft = bWidth - self.width(); 
if (currenttop <= 0) 
currenttop = 0; 
if (currenttop >= bHeight) 
currenttop = bHeight - self.height(); 
self.css({ left: currentleft, top: currenttop }); 
} 
); 
$(document).mousemove(function(event) { 
var state = self.data("ifDary"); 
 if (state && state == "true") { 
var selfLeft = event.pageX - parseInt(self.data("selfLeft")); //Calculate the left position of this element 
var selfTop = event. pageY - parseInt(self.data("selfTop")); 
self.css({ left: selfLeft, top: selfTop }); //Set the position of this element 
} 
}); 
return self; 
} 

javascript code

Copy code The code is as follows:

//This is the JQUERY framework, there is no such thing I searched everywhere by myself and stepped on a bunch of them
//This is my control code