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

jquery draggable form control implementation code_jquery

WBOY
WBOYOriginal
2016-05-16 18:31:45889browse

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