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

        }
    });

}

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

谢谢！

Answer 1

看起来是因为你是在<img>上进行的，jqueryui包含在<div>中，然后图像的可拖动组件发生在包裹<div>内。 / p>

尝试将<img>包裹在<div>中（如果样式为display:inline-block，将“拥抱”x和y轴上图像的大小），制作{{1可拖动（因此封闭的<div>也是如此），并使<img>可调整大小（因为div拥抱图像，所有这些都很好）。

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

Answer 2

Resizable和draggable导致了我的各种DOM转换问题。有一个bug filed for this behavior;临时修复是应用以下CSS，这对我有用：

.element {
  position: absolute !important;
}

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：“”} “助手”对象相对于被拖动项目的位置。

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

根据这个问题：Resizable, draggable object in jquery. Possible?如果您只是包含jquery-ui.css，它将起作用。当这些都没有时，它解决了我的问题。我的代码很简单：

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

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

Answer 5

如果您首先应用可调整大小，则可以将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 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

Jquery可拖动和可调整大小

6 个答案: