Jquery可拖拽和可调整大小

Question

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

        }
    });

}

如果去掉可调整大小的线，这将正常工作，但我希望这些图像可以拖动和调整大小。如果我尝试使同一元素具有这两个属性，则会出现奇怪的行为。是否有人知道如何使其正常工作？

谢谢！

- Tom Gullen

Answer 1

看起来是因为你在一个<img>上进行操作，而jqueryui将其包裹在一个<div>中，然后图片的可拖动组件就发生在包含的<div>内。

尝试将<img>包装在一个<div>中（如果使用display:inline-block样式，将在x和y轴上紧贴着图像），使这个<div>可拖动（因此封闭的<img>也会被拖动），并使<img>可调整大小（由于div围绕着图像，所以它们都很好地放置在一起）。

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

- davin

---

谢谢Davin。不过这个问题有点复杂，因为该图像附加了许多函数，并且还有load()函数，这使得事情变得更加困难，但是您的答案和工作示例对我来说已经足够了 :) - Tom Gullen

这正是我在寻找的简明答案。在浏览了数页谷歌搜索结果后，我终于找到了这个答案。谢谢！ - Smith Smithy

Answer 2

对我来说，可调整大小和可拖动元素会导致各种DOM移位问题。关于这种行为有一个已提交的错误，临时修复方法是应用以下CSS，对我很有效：

.element {
  position: absolute !important;
}

- subelsky

---

这解决了我在2020年遇到的问题。感谢subelsky。 - nathan

Answer 3

我很好奇，这里是可拖拽和可调整大小的工作代码。 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:""}描述与被拖动物品相关的“helper”对象的位置。

 $('#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();

- DefyGravity

---

@davin 绝对需要在图像前面添加一个 div。我尝试调整大小和拖动裸的 <img>，发现能够复现问题。 - DefyGravity

Answer 4

请确保在您的项目中引用了 jquery-ui.css！

根据这个问题： jQuery 中可调整大小、可拖动对象。可能吗？ 如果您简单地包含了 jquery-ui.css，它将会起作用。当我尝试其他方法都无效时，这个解决了我的问题。我的代码很简单：

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

这个元素原本可以被拖动，但无法调整大小。添加CSS后，不需要额外的div或代码即可进行调整大小。

- user736893

---

包括 CSS 解决了我的问题。你可能想要突出显示它。谢谢。 - Doruk

更新了，希望能有所帮助。 - user736893

Answer 5

如果您先应用可调整大小的功能，然后可以将可拖动的功能应用于图像的父级元素，这是通过应用可调整大小创建的新 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") });

- TrailTrackers

---

这在我的试验中引起了极其奇怪的行为。 - user736893

这是我最终采用的解决方案。 - Brandon

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

这个修复本身就存在于时间的开始：Jquery的Github Bug已修复链接

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

- rhitz