jQuery的可拖动和resizable

function makeResourceDrag(arrIndexID) { 

    $('#imgA' + arrIndexID).resizable(); 

    $('#imgA' + arrIndexID).draggable({ 
     start: function(event, ui) { 
      isDraggingMedia = true; 
     }, 
     stop: function(event, ui) { 
      isDraggingMedia = false; 

      // Set new x and y 
      resourceData[arrIndexID][4] = Math.round($('#imgA' + arrIndexID).position().left/currentScale); 
      resourceData[arrIndexID][5] = Math.round($('#imgA' + arrIndexID).position().top/currentScale); 

     } 
    }); 

}

如果可调整大小的线取出这工作得很好，但我希望这些图像可拖动和调整大小，我得到可笑的行为，如果我尝试做相同的元素有两个属性，没有任何人知道一种方法来完成这项工作？jQuery的可拖动和resizable

谢谢！

来源

2011-02-09 Tom Gullen

看起来像是因为你在<img>上这样做，jqueryui将其包装在<div>中，然后图像的可拖动组件会在包装<div>内发生。

尝试包裹在一个<div>的<img>（其中，如果风格display:inline-block，将“拥抱”在x轴和y轴的图像的尺寸），使<div>拖动（并因此封闭<img>会随着孔），并使<img>可调整大小（并且由于div拥抱图像，所有坐标都很好）。

工作示例：这里http://jsfiddle.net/vrUgs/2/

来源

2011-02-09 18:47:11 davin

谢谢达文。这有点复杂，虽然因为图像被配置了很多函数并且有load（）函数，这使得事情变得更加困难，但是您的答案+工作示例对我来说已经足够了:) – 2011-02-10 11:45:33

这是简要的答案我正在寻找。在几个谷歌页面后，我碰到这个答案。谢谢！！ – 2013-11-11 23:12:31

我很好奇，是工作的代码可拖动和可调整大小。 jQuery的：

jQuery(document).ready(function(event){ 
    jQuery(".img").draggable().find("img").resizable(); 
});

HTML：

<div class="img"> 
    <img alt="" src="images/hard-disk-fingerprint.jpg"/> 
</div>

其他的东西，我注意到，不接受就拉倒，我不知道涉及改变你的JS工作。

首先，被拖动的所有'draggables'都会获得'.ui-draggable-dragging'类，您可以将其用于'isDraggingMedia'逻辑。我建议使用ui.offset {top：“”，left：“”}，可能会改变ui.position {top：“”，left：“”}。描述'助手'对象相对于被拖动项目的位置。

$('#div holding imgA+arrindexid').draggable({stop:function(event, ui){ 
//isDraggingMedia = true; 
//replace this with a $().is(ui-draggable-dragging) check if possible where it matters in //your other javascript. 
        // Set new x and y 
        resourceData[arrIndexID][4] = Math.round(ui.offset.left/currentScale); 
        resourceData[arrIndexID][5] = Math.round(ui.offset.top/currentScale); 
    }}).find('img').resizable();

来源

2011-02-09 18:58:45 DefyGravity

@达文肯定需要在图像前添加div。我能够重现问题，试图调整大小和拖动一个裸的 – DefyGravity 2011-02-09 19:20:33

如果先应用可调整大小，则可以将可拖动的元素应用到img的父级;这是通过应用可调整大小创建的新div。

chartImg.resizable({ animate: true, 
      ghost: true, 
      handles: 'n,s,e,w,ne,se,nw,sw', 
      start: function (event, ui) { startResize(event, ui); }, 
      resize: function (event, ui) { monitorResize(event, ui); }, 
      stop: function (event, ui) { stopResize(event, ui); } 
     }).parent().draggable({ containment: $(".chartPane") });

来源

2012-08-07 15:11:50 TrailTrackers

可调整大小和可拖动导致各种DOM转移问题给我。有一个bug filed for this behavior;临时解决方法是应用下列CSS，这为我工作：

.element { 
    position: absolute !important; 
}

来源

2013-01-02 17:04:07 subelsky

每一个问题：Resizable, draggable object in jquery. Possible?如果你只是包括jQuery的ui.css它会奏效。它解决了我的问题，当这些都没有。我的代码很简单：

$(element).resizable().draggable();

这是可拖动的，但不能调整大小。没有别的工作。添加CSS允许调整大小没有额外的div或代码。

来源

2013-06-07 18:38:41

-1

draggable将css上的位置设置为相对，并将可调整大小设置为绝对... 至少这是我设置为可拖动和可调整大小的div的“有趣行为”。当我改变另一个div的位置时窗口...

所以我强迫CSS设置位置：绝对在每个移动事件（拖动和调整大小），一切都很好！

来源

2014-05-19 19:01:47 lucasumberto

负责此问题的代码是其他方法的替代方法：Github link指向Bug 1749。

// bugfix for http://dev.jquery.com/ticket/1749 
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) { 
    el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left }); 
}

的自我修复，因为刚开始的时候存在：Github Bug Fixed link for Jquery

// bugfix #1749 
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) { 

    // sOffset decides if document scrollOffset will be added to the top/left of the resizable element 
    var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position')); 
    var dscrollt = sOffset ? o.documentScroll.top : 0, dscrolll = sOffset ? o.documentScroll.left : 0; 

    el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) }); 
}

，并有效地只更新一次，7年前：Updated Link

// bugfix #1749 
     // bugfix for http://dev.jquery.com/ticket/1749 
     if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) { 
      // sOffset decides if document scrollOffset will be added to the top/left of the resizable element 
      var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position')); 
      var dscrollt = sOffset ? this.documentScroll.top : 0, dscrolll = sOffset ? this.documentScroll.left : 0; 

      el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) }); 
      el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left }); 
     }

参考：jquery link

来源

2015-12-30 11:33:37

jQuery的可拖动和resizable

回答

相关问题