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

        }
    });

}

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

谢谢！

score 47 · Accepted Answer

看起来这是因为您在 a 上执行此操作<img>，jqueryui 将其包装在 a<div>中，然后图像的可拖动组件发生在 wrapping<div>中。

尝试将其包装<img>在 a 中<div>（如果设置了样式display:inline-block，将在 x 和 y 轴上“拥抱”图像的大小），使<div>可拖动（因此封闭<img>也将是），并使<img>可调整大小（并且由于 div拥抱图像，一切都很好）。

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

score 10 · Accepted Answer

Resizable 和 draggable 给我带来了各种各样的 DOM 移动问题。此行为存在一个错误；临时解决方法是应用以下对我有用的 CSS：

.element {
  position: absolute !important;
}

score 6 · Accepted Answer

我很好奇，这是可拖动和调整大小的工作代码。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();

score 5 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

如果先应用可调整大小，然后可以将可拖动对象应用到 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") });

score 0 · Accepted Answer

负责此问题的代码是其他解决方法：<a href="https://github.com/jquery/jquery-ui/blob/13be9205e1a0d227ef44ab28aed6d0e18aa5cf69/ui/resizable.js#L295-300" rel="nofollow ">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 });
}

修复本身从一开始就存在：<a href="https://github.com/jquery/jquery-ui/commit/ab281b36d7cc10913a77f2f8da9ff7b7c011b3ee#diff-403ec53793e302fe0e3c1ff76b3a8b58R281" rel="nofollow">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 年前：<a href="https://github.com/jquery/jquery-ui/commit/7f12279da59e86c0a0342e7a17b927c53be73697" rel="nofollow">更新链接

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

jquery - Jquery 可拖动和可调整大小

6 回答 6

Related

Reference