Jquery可拖动和可resize

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); } }); } 

如果可以调整可resize的行，这可以正常工作，但我希望这些图像可拖动并可resize，如果我尝试使相同的元素具有这两个属性，我会得到有趣的行为，有没有人知道如何使这个工作？

谢谢！

Answer 1

看起来是因为你是在上做的，jqueryui包含在

，然后图像的可拖动组件发生在包装

。

尝试将包装在

（如果样式display:inline-block ，将“拥抱”x和y轴上图像的大小），使

可拖动（因此包含也将如此），并使可resize（因为div拥抱图像，所有这些都很好）。

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

Answer 2

可resize和可拖动对我来说导致各种DOM转换问题。 这个行为有一个错误 ; 临时修复是应用以下CSS，这对我有用：

 .element { position: absolute !important; } 

Answer 3

我很好奇，这里是可拖动和可resize的工作代码。 jQuery的：

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

HTML：

我注意到的其他东西，接受或离开它，因为我不知道改变你的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(); 

Answer 4

根据这个问题： jquery中可resize的可拖动对象。 可能？ 如果你只是包含jquery-ui.css它会工作。 当这些都没有时，它解决了我的问题。 我的代码很简单：

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

这是可拖动但不可resize。 没有其他工作。 添加CSS允许resize而不需要额外的div或代码。

Answer 5

如果您首先应用可resize，则可以将draggable应用于img的父级; 这是通过应用resizable创建的新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") }); 

Answer 6

负责这个的代码是其他东西的解决方法： Github链接指向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修复了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年前： 更新了链接

 // 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链接