jQuery可拖动和可调整大小 [英] Jquery Draggable AND Resizable

问题描述

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?

谢谢！

推荐答案

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

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>.

尝试将<img>包裹在<div>中(如果样式为display:inline-block，则将拥抱" x和y轴上的图像大小)，使<div>可拖动(并随函附上) <img>也是如此)，并使<img>可调整大小(并且由于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).

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

这篇关于jQuery可拖动和可调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！