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

        }
    });

}

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

спасибо!

22
jquery jquery-ui-draggable jquery-ui-resizable

6 ответов

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

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

пример: http://jsfiddle.net/vrUgs/2/

43

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

.element {
  position: absolute !important;
}
9

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

во-вторых, чтобы получить текущую позицию точно, я рекомендую использовать пользовательский интерфейс.смещение{top:"", left:""}, возможно изменено с помощью пользовательского интерфейса.позиция{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();
4

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

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

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

3

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

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

0