Jquery перетаскиваемый и изменяемый размер

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

        }
    });

}

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

Спасибо!


jquery jquery-ui-draggable jquery-ui-resizable
person Tom Gullen    schedule 09.02.2011    source источник

Ответы (6)


arrow_upward
46
arrow_downward

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

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

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

person davin    schedule 09.02.2011
comment
Спасибо Давин. Это немного сложнее, потому что изображение привязано к множеству функций, а также имеет функции load(), что намного усложняет задачу, но вашего ответа + рабочего примера мне достаточно, чтобы продолжить :) - person Tom Gullen; 10.02.2011
comment
Это был краткий ответ, который я искал. После нескольких страниц Google я наткнулся на этот ответ. Спасибо!! - person Smith Smithy; 12.11.2013

arrow_upward
10
arrow_downward

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

.element {
  position: absolute !important;
}
person subelsky    schedule 02.01.2013
comment
Это решило мои проблемы в 2020 году. Спасибо subelsky. - person nathan; 19.05.2020

arrow_upward
6
arrow_downward

Мне было любопытно, вот рабочий код, который можно перетаскивать и изменять размер. 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.

во-первых, все «перетаскиваемые» объекты, которые перетаскиваются, получают класс «.ui-draggable-draging», который вы можете потенциально использовать для своей логики «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();
person DefyGravity    schedule 09.02.2011
comment
@davin определенно нужно добавить div перед изображением. я смог воспроизвести проблемы, пытаясь изменить размер и перетащить голое ‹img› - person DefyGravity; 09.02.2011

arrow_upward
5
arrow_downward

Убедитесь, что jquery-ui.css упоминается в вашем проекте!

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

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

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

person JOATMON    schedule 07.06.2013
comment
в том числе css решил это для меня. вы можете выделить это. Благодарю. - person Doruk; 20.04.2020
comment
Обновил, надеюсь поможет. - person JOATMON; 20.04.2020

arrow_upward
1
arrow_downward

Если вы сначала примените изменяемый размер, вы можете применить перетаскивание к родительскому элементу 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") });
person TrailTrackers    schedule 07.08.2012
comment
Это вызвало чрезвычайно странное поведение в моем испытании. - person JOATMON; 07.06.2013
comment
Это решение, с которым я столкнулся - person Brandon; 18.04.2018

arrow_upward
0
arrow_downward

Код, ответственный за это, был обходным путем для чего-то другого: ">ссылка на 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 });
}

Само исправление существует с незапамятных времен: ​ссылка на Gitque Bugry.

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

person rhitz    schedule 30.12.2015