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

        }
    });

}

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

谢谢!

Answer 1

看起来是因为你是<img>在a <div>,jqueryui包装在一个,然后图像的可拖动组件发生在包装内<div>.

尝试包装<img>a <div>(如果样式display:inline-block,将"拥抱"x和y轴上的图像大小),使<div>可拖动(因此封闭<img>也将是),并使<img>可调整大小(以及自div拥抱图像,一切都很好.)

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

Answer 2

可调整大小和可拖动对我来说会导致各种DOM转换问题.这个行为有一个错误 ; 临时修复是应用以下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

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

根据这个问题：jquery 中可调整大小、可拖动的对象。可能的？如果你简单地包含 jquery-ui.css 它将起作用。当这些都没有时，它解决了我的问题。我的代码很简单：

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

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