Of Stack

jquery.dragscale.js implements the method of drag and drop to change the size of an element

  • 2021-01-06 00:27:42
  • OfStack

This article illustrates how the jquery plug-in jquery.dragscale.js implements drag and drop to change the size of an element. To share with you for your reference, as follows:

This plugin was written by the author of this article, with the purpose of improving the author's js capability, and also providing some convenience for beginners of js when using the plugin, so that the old birds can fly leisurely.

This plugin is designed to implement the popular drag-and-drop effect of changing the size of elements. You can set the minimum width and maximum width of the element to be dragged 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.resizable.js"></script>
</head>
<body>
<div class="box"> Drag me! <span class="drag"></span></div>
<script>
$(function(){
  $(".drag").resizable({
    minW : 150,
    minH : 150,
    maxW : 500,
    maxH : 500,
    });
  })
</script>
</body>
</html>

jquery.dragscale.js 


/*
*resizable 0.1
*Dependenc jquery-1.7.1.js
*/
;(function(a){
  a.fn.resizable = function(options){
    var defaults = { // The default parameters 
      minW : 150,
      minH : 150,
      maxW : 500,
      maxH : 500,
      }
    var opts = a.extend(defaults, options);
    this.each(function(){
      var obj = a(this);
      obj.mousedown(function(e){
        var e = e || event; // Distinguish between IE And other browser event objects 
        var x = e.pageX - obj.position().left; // Gets the distance to the left of the parent element of the mouse distance matching element 
        var y = e.pageY - obj.position().top; // Gets the distance at the top of the parent element of the mouse distance matching element 
        $(document).mousemove(function(e){
          var e = e || event;
          var _x = e.pageX - x; // Dynamically gets the width to the left of the matched element from its parent element 
          var _y = e.pageY - y;
          _x = _x < opts.minW ? opts.minW : _x; // The minimum width of the matched element is guaranteed to be 150px
          _x = _x > opts.maxW ? opts.maxW : _x; // Ensure that the maximum width of the matched element 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 is up   Delete move events    Matching element width and height changes stop 
          });
        });
      })
    }
})(jQuery);

Complete example code click here site download.

Readers who are interested in more jQuery related content can check the special features of this site: jQuery Drag and drop effects and techniques summary, jQuery extension techniques summary, jQuery common classic effects summary, jQuery animation and effects usage summary, jquery selector method summary and jQuery common plugins and usage summary

I hope this article is helpful to jQuery program design.

Related articles: