draggable和resizable效果不能同时实现么

攻城师F jQuery UI Inter... 最后由 极客学院_ASMITA 于2015年06月29日回复

  • 1 回答
  • 3.5k 浏览

想实现一个在DIV中 存在多个图片,只能在这个DIV中拖动位置,并且可以(等比例)缩放大小。

JS代码如下

$(document).ready(function(){

    $("#drag1").draggable({containment: 'parent'});

    $("#drag2").draggable({containment: 'parent'});

    $("#drag3").draggable({containment: 'parent'});

    $("#drag4").draggable({containment: 'parent'});

    

    $("#drag1").resizable({aspectRatio: 'true'});

    $("#drag2").resizable({aspectRatio: 'true'});

    $("#drag3").resizable({aspectRatio: 'true'});

    $("#drag4").resizable({aspectRatio: 'true'});

});

为什么这样写只能实现等比例缩放,拖动效果没了?

  • 极客学院_ASMITA 2015年06月29日 回答 #1楼
  • 对元素同时设置拖动和resize是有顺序的

    需要先设置$("#select").resizable()

    再设置$("#select").draggable()

    原因为Jquery UI为了能让元素可以被缩放

    将元素包到DIV里面了

    先设置元素的拖动事件将不能响应

    换了顺序之后,要真正能拖动还得设置:$("#select").parent().draggable()

    另外,父容器的position设置成relative

  • 1 评论