Home > Developer > Web Develop
This plugin is written by the author of this blog, the purpose is to improve the author's JS ability, but also to some JS rookie in the use of plug-ins to provide some convenience, the birds fly leisurely.
This plugin is designed to achieve the most popular drag-and-drop change element size, and you can set the minimum width and height of the dragged element according to your actual needs. The overall code is as follows:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><style>*{margin:0;padding:0;}. Box{position:Absolute; Left:100px;Top:100px;Border:1px solid #eee;width:150px;Height:150px;padding:10px;cursor:Move;}. Drag{position:Absolute;Bottom:3px; Right:3px;Display:Block;width:7px;Height:7px;background:URL (scale.png) no-repeat}</style><Scripttype= "Text/javascript"src=".. /test/jquery-1.7.1.js "></Script><Scripttype= "Text/javascript"src= "Jquery.resizable.js"></Script></Head><Body><Divclass= "box">Drag me!<spanclass= "Drag"></span></Div><Script>$(function(){ $(". Drag"). Resizable ({minw: Max, MinH: Max, Maxw: -, Maxh: -, }); })</Script></Body></HTML>
Plugin jquery.dragscale.js code:
/**resizable 0.1*copyright (c) 2015 small bad Http://tnnyang.cnblogs.com*dependenc jquery-1.7.1.js*/;(function(a) {a.fn.resizable=function(options) {varDefaults = {//Default Parametersminw:150, MinH:150, Maxw:500, Maxh:500, } varopts =a.extend (defaults, options); This. each (function(){ varobj = A ( This); Obj.mousedown (function(e) {varE = e | | Event//differentiate between IE and other browser event objects varx = E.pagex-obj.position (). Left;//gets the distance to the left of the parent element of the matching element from the mouse vary = E.pagey-obj.position (). Top;//gets the distance of the mouse from the top of the parent element of the matching element$ (document). MouseMove (function(e) {varE = e | |event; var_x = E.pagex-x;//dynamically gets the width of the matching element to the left of its parent element var_y = E.pagey-y; _x= _x < OPTS.MINW? OPTS.MINW: _x;//ensure that the minimum width of the matching element is 150px_x = _x > Opts.maxw? OPTS.MAXW: _x;//guaranteed maximum width of matching elements is 500px_y = _y < Opts.minh?Opts.minh: _y; _y= _y > Opts.maxh?opts.maxh: _y; Obj.parent (). css ({width:_x,height:_y}); }). MouseUp (function(){ $( This). Unbind ("MouseMove");//when the mouse lifts the delete move event matches the element width height change stop }); }); })}) (jQuery);
Click Download drag to change the element size of the demo
jquery Plugin Drag-and-drop change element size
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
