Jquery 可拖动和可调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4948582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Draggable AND Resizable
提问by Tom Gullen
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);
}
});
}
This works fine if the resizeable line is taken out, but I want these images to be draggable and resizeable, I get funny behaviours if I try and make the same element have both attributes, does anyone know a way to make this work?
如果取出可调整大小的线，这很好用，但我希望这些图像可拖动和调整大小，如果我尝试使相同的元素具有两个属性，我会得到有趣的行为，有没有人知道使这项工作的方法？
Thanks!
谢谢！
回答by davin
Looks like it's because you're doing it on an <img>, which jqueryui wraps in a <div>, and then the draggable component of the image happens within the wrapping <div>.
看起来是因为你是在 an 上做的<img>，jqueryui 包装在 a 中<div>，然后图像的可拖动组件发生在 wrapping 中<div>。
Try wrapping the <img>in a <div>(which if styled display:inline-block, will "hug" the size of the image in both x and y axes), make the <div>draggable (and therefore the enclosed <img>will be as well), and make the <img>resizable (and since the div hugs the image, it all sits nicely).
尝试将<img>a包装<div>（如果有样式display:inline-block，将在 x 和 y 轴上“拥抱”图像的大小），使<div>可拖动（因此封闭的<img>也将是），并使<img>可调整大小（并且由于 div拥抱图像，一切都很好）。
Working example: http://jsfiddle.net/vrUgs/2/
工作示例：http: //jsfiddle.net/vrUgs/2/
回答by subelsky
Resizable and draggable were causing all kinds of DOM shifting problems for me. There's a bug filed for this behavior; the temporary fix is to apply the following CSS, which worked for me:
Resizable 和 draggable 给我带来了各种 DOM 转换问题。有一个针对此行为的错误；临时修复是应用以下 CSS，这对我有用：
.element {
position: absolute !important;
}
回答by DefyGravity
I was curious, here is working code that is draggable and resizable. jQuery:
我很好奇，这是可拖动和可调整大小的工作代码。jQuery：
jQuery(document).ready(function(event){
jQuery(".img").draggable().find("img").resizable();
});
html:
html：
<div class="img">
<img alt="" src="images/hard-disk-fingerprint.jpg"/>
</div>
other stuff i noticed, take or leave it, as I do not know the work involved in changing your JS.
我注意到的其他东西，接受或离开它，因为我不知道改变你的 JS 所涉及的工作。
first, all 'draggables' that are being dragged get a class of '.ui-draggable-dragging' which, you can use for your 'isDraggingMedia' logic potentially.
首先，所有被拖动的“draggables”都会得到一类“.ui-draggable-dragging”，您可以将其用于“isDraggingMedia”逻辑。
second, to get the current position accurately, I recommend using the ui.offset{top:"",left:""}, possible altered with the ui.position{top:"",left:""} describing the position of the 'helper' object relative to the item being dragged.
其次，为了准确获取当前位置，我建议使用 ui.offset{top:"",left:""}，可能与 ui.position{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();
回答by Devil's Advocate
Make sure jquery-ui.cssis referenced in your project!
确保jquery-ui.css在您的项目中被引用！
Per this question: Resizable, draggable object in jquery. Possible?if you simply include jquery-ui.css it will work. It solved my problem when none of these did. My code is simple:
根据这个问题：jquery 中可调整大小、可拖动的对象。可能的？如果你简单地包含 jquery-ui.css 它将起作用。当这些都没有时，它解决了我的问题。我的代码很简单：
$(element).resizable().draggable();
This was draggable but not resizable. Nothing else worked. Adding the CSS allowed resizing with no extra divs or code.
这是可拖动但不可调整大小的。没有其他工作。添加 CSS 允许在没有额外的 div 或代码的情况下调整大小。
回答by TrailTrackers
If you apply the resizable first, you can then apply the draggable to the img's parent; which is the new div created by applying resizable.
如果您先应用可调整大小，则可以将可拖动对象应用到 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") });
回答by rhitz
The code responsible for this was a workaround for something else: ?Github linkwhich point to Bug 1749.
对此负责的代码是其他问题的解决方法：指向Bug 1749 的Github 链接。
// 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 });
}
The fix itself exists since the beginning of time: ?Github Bug Fixed link for Jquery
修复本身从一开始就存在：？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) });
}
And was effectively just updated once, 7 years ago: ?Updated Link
并且在 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 });
}
Reference : jquery link
参考：jquery 链接
