jQuery图片DIV指定范围内拖动加调整大小

所属分类:输入-拖和放

jQuery图片DIV指定范围内拖动加调整大小 ie兼容8

使用方法

需要引用的样式

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script type="text/javascript" src="js/jquery-ui.js"></script>

调整大小功能相关的CSS+JS

代码使用说明:

$( function() {
    $( "#resizable1" ).resizable({     //要调整的DIV的ID   #resizable1
      aspectRatio: true  //开启按比例缩放,也可以指定比例: 16 / 9
    });
 });

指定范围拖动相关文件

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>

代码使用说明:

$(function(){
    $('.box-5 div').each(function(){
        $(this).dragging({
            move : 'both', //拖动方式  1、x   2、y    3、both(xy)
            randomPosition : true , //开启随机位置
            hander:'.hander'//鼠标按住此类拖动
        });
    });
});


相关插件-拖和放

微信左划删除效果

微信左划出现删除按钮
  拖和放
 9825  105

jQuery拖动插件draggabilly.pkgd.js

jQuery拖动插件draggabilly.pkgd.js提供多种拖动效果,并且兼容性还不错。
  拖和放
 4655  43

jQuery双击拖拽图片

jQuery鼠标双击事件拖拽图片
  拖和放
 5716  10

jquery拖拽插件Shapeshift v2.0

jquery拖拽插件Shapeshift v2.0拖放重新排列在一个容器或甚至将在多个物品使容器变形。拖动元素周围可以改变他们的索引位置在它们的父容器。
  拖和放
 18680  68

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

    李大阳 0
    2017/8/3 9:51:46
    瑞尔时代-黄山 0
    2017/7/25 17:54:23

    这个插件很不错

    回复
    ?经不起┼点?触碰? 0
    2017/7/7 10:15:45

    这个插件很不错

    回复
    技术部-黄晓佳 0
    2017/7/6 9:21:22

    回复能有几分?

    回复
    0
    2017/6/27 11:35:07
    风雪 0
    2017/4/28 9:57:38
    找了好久才找到这款插件。 回复
    yoonfeng 0
    2017/4/19 17:29:48

    有个bug,放大缩小的时候本身相对父级没有随着变化,导致只能或者可以拖到外面

    回复
    lygtrl 0
    2017/4/6 16:45:13
    SDK 0
    2017/1/10 18:01:04

    有bug,缩放之后,就无法移动到边缘了~!!!!

        Wish You Were Here0
        2017/3/6 15:03:10

        你好,请问能分享一份吗?

        pepsi0
        2017/4/12 15:42:41
        求如何解决这个bug!!!
        0
        2017/6/27 11:35:44

        这个插件不错

        Hwl0
        2017/7/22 13:40:02

        看 drag.js 源码,  仓促下的解决方法,在 handle 元素鼠标按下时重新计算大小;  没有测试会不会出现其他 bug  ^_^,要是被坑了我不理的哦

        在 hander.mousedown(function(e){ 下按添加两行代码

                hander.mousedown(function(e){            thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));            thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom'));        
        Hwl0
        2017/7/22 13:42:07
        hander.mousedown(function(e){
                            //下面两行是添加的
        			thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));
        		 	thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom'));
        		//....源代码
    回复
取消回复