快捷導(dǎo)航

jquery插件jquery.dragscale.js實現(xiàn)拖拽改變元素大小的方法(附demo源碼下載)

更新時間：2016年02月25日 10:58:42 作者：小壞

這篇文章主要介紹了jquery插件jquery.dragscale.js實現(xiàn)拖拽改變元素大小的方法,涉及jquery針對鼠標(biāo)事件的響應(yīng)及頁面元素動態(tài)操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jquery插件jquery.dragscale.js實現(xiàn)拖拽改變元素大小的方法。分享給大家供大家參考，具體如下：

該插件是文章作者所寫，目的在于提升作者的js能力，也給一些js菜鳥在使用插件時提供一些便利，老鳥就悠然地飛過吧。

此插件旨在實現(xiàn)目前較為流行的拖拽改變元素大小的效果，您可以根據(jù)自己的實際需求來設(shè)置被拖拽元素的最小寬高和最大寬高。整體代碼如下：

<!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>無標(biāo)題文檔</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>

插件 jquery.dragscale.js 代碼：

/*
*resizable 0.1
*Dependenc jquery-1.7.1.js
*/
;(function(a){
  a.fn.resizable = function(options){
    var defaults = { //默認(rèn)參數(shù)
      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; //區(qū)分IE和其他瀏覽器事件對象
        var x = e.pageX - obj.position().left; //獲取鼠標(biāo)距離匹配元素的父元素左側(cè)的距離
        var y = e.pageY - obj.position().top; //獲取鼠標(biāo)距離匹配元素的父元素頂端的距離
        $(document).mousemove(function(e){
          var e = e || event;
          var _x = e.pageX - x; //動態(tài)獲取匹配元素距離其父元素左側(cè)的寬度
          var _y = e.pageY - y;
          _x = _x < opts.minW ? opts.minW : _x; //保證匹配元素的最小寬度為150px
          _x = _x > opts.maxW ? opts.maxW : _x; //保證匹配元素的最大寬度為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"); //當(dāng)鼠標(biāo)抬起 刪除移動事件  匹配元素寬高變化停止
          });
        });
      })
    }
})(jQuery);

完整實例代碼點擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: