JQuery Draggable AND Resizeable

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

        }
    });

}

Это отлично работает, если строка с изменяемой размерностью вынимается, но я хочу, чтобы эти изображения были перетаскиваемыми и изменяемыми по размеру, я получаю забавное поведение, если я пытаюсь сделать один и тот же элемент атрибутами, кто-нибудь знает способ сделать эту работу

Спасибо!

Ответы

Ответ 1

Похоже на то, что вы делаете это на <img>, который jqueryui обертывает в <div>, а затем перетаскиваемый компонент изображения происходит в обертке <div>.

Попробуйте обернуть <img> в <div> (который, если стиль display:inline-block, будет "обнимать" размер изображения в осях x и y), перетащите <div> (и, следовательно, вложенный <img> будет также), и измените размер <img> (и поскольку div обнимает изображение, все сидит красиво).

Рабочий пример: http://jsfiddle.net/vrUgs/2/

Ответ 2

Изменчивые и перетаскиваемые вызывали для меня все проблемы с переключением DOM. Там ошибка, зарегистрированная для этого поведения; временное исправление заключается в применении следующего CSS, который работал у меня:

.element {
  position: absolute !important;
}

Ответ 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".

second, чтобы точно получить текущую позицию, я рекомендую использовать 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();

Ответ 4

По этому вопросу: Изменчивый, перетаскиваемый объект в jquery. Возможно? Если вы просто включите jquery-ui.css, он будет работать. Он решил мою проблему, когда никто из них не сделал. Мой код прост:

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

Это было перетаскиваемо, но не изменялось. Ничего более не работало. Добавление CSS позволило изменять размер без дополнительных div или кода.

Ответ 5

Если вы примените изменение размера сначала, вы можете применить draggable к родителю 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") });

Ответ 6

Код, ответственный за это, был обходным путем для чего-то еще: ссылка Github, которая указывает на Ошибка 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 Исправлена ссылка для 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 лет назад: Обновлено Ссылка

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

Ответ 7

draggable устанавливает позицию на css на относительную, а изменчивые множества на абсолютные... по крайней мере, это была моя проблема с "смешными поведением" в divs, которые я настраивал на перетаскивание и изменение размеров.. они прогуливались без смысла в окне, когда я изменил положение другого div...

поэтому я заставил css установить позицию: абсолютный в каждом событии движения (перетащить и изменить размер), и все получилось нормально!