Jquery Draggable И изменяемый размер - PullRequest
Новая
       8

Jquery Draggable И изменяемый размер

22 голосов
/ 09 февраля 2011 
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);

        }
    });

}

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

Спасибо! * * 1004

Ответы [ 6 ]

43 голосов
/ 09 февраля 2011

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

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

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

9 голосов
/ 02 января 2013

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

.element {
  position: absolute !important;
}
4 голосов
/ 09 февраля 2011

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

секунду, чтобы точно получить текущую позицию, Я рекомендую использовать ui.offset {top: "", left: ""}, возможно, измененный с помощью ui.position {top: "", left: ""}, описывающего положение объекта 'helper' относительноперетаскиваемый элемент. 

 $('#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();
3 голосов
/ 07 июня 2013

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

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

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

1 голос
/ 07 августа 2012

Если вы сначала примените изменяемый размер, то сможете применить перетаскиваемый элемент к родителю 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") });
0 голосов
/ 30 декабря 2015

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

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

...