Le plug-in jquery jquery.dragscale.js implémente la méthode de glisser et de modifier la taille des éléments (avec téléchargement du code source de la démo)

Le plug-in jquery jquery.dragscale.js implémente la méthode de glisser et de modifier la taille des éléments (avec téléchargement du code source de la démo)_jquery

WBOY

Libérer： 2016-05-16 15:13:38

original

2189 Les gens l'ont consulté

L'exemple de cet article décrit comment le plug-in jquery jquery.dragscale.js implémente le glisser pour modifier la taille des éléments. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ce plug-in est écrit par l'auteur de l'article. Le but est d'améliorer les capacités de l'auteur en js et également de fournir une certaine commodité à certains novices en js lorsqu'ils utilisent le plug-in. Les vétérans peuvent simplement voler tranquillement.

Ce plug-in est conçu pour réaliser l'effet actuellement populaire du glisser-déposer pour modifier la taille des éléments. Vous pouvez définir la largeur et la hauteur minimales ainsi que la largeur et la hauteur maximales de l'élément déplacé en fonction de vos besoins réels. Le code global est le suivant :

<!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>无标题文档</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">拖拽我吧！<span class="drag"></span></div>
<script>
$(function(){
  $(".drag").resizable({
    minW : 150,
    minH : 150,
    maxW : 500,
    maxH : 500,
    });
  })
</script>
</body>
</html>

Copier après la connexion

Code du plug-in jquery.dragscale.js :

/*
*resizable 0.1
*Dependenc jquery-1.7.1.js
*/
;(function(a){
  a.fn.resizable = function(options){
    var defaults = { //默认参数
      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; //区分IE和其他浏览器事件对象
        var x = e.pageX - obj.position().left; //获取鼠标距离匹配元素的父元素左侧的距离
        var y = e.pageY - obj.position().top; //获取鼠标距离匹配元素的父元素顶端的距离
        $(document).mousemove(function(e){
          var e = e || event;
          var _x = e.pageX - x; //动态获取匹配元素距离其父元素左侧的宽度
          var _y = e.pageY - y;
          _x = _x < opts.minW &#63; opts.minW : _x; //保证匹配元素的最小宽度为150px
          _x = _x > opts.maxW &#63; opts.maxW : _x; //保证匹配元素的最大宽度为500px
          _y = _y < opts.minH &#63; opts.minH : _y;
          _y = _y > opts.maxH &#63; opts.maxH : _y;
          obj.parent().css({width:_x,height:_y});
        }).mouseup(function(){
          $(this).unbind("mousemove"); //当鼠标抬起 删除移动事件  匹配元素宽高变化停止
          });
        });
      })
    }
})(jQuery);

Copier après la connexion

Cliquez ici pour un exemple de code completTéléchargez depuis ce site.

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "jQuery plug-ins courants et résumé d'utilisation》

J'espère que cet article sera utile à tous ceux qui programment jQuery.