Блог

Главная - Вопросы по программированию - Как переместить второй div с той же скоростью, с какой перетаскивался первый div jquery UI?

Как переместить второй div с той же скоростью, с какой перетаскивался первый div jquery UI?

#javascript #jquery #html #jquery-ui

#javascript #jquery #HTML #jquery-ui

Вопрос:

Если у меня есть 2 <divs> , a и b, которые являются отдельными разделениями, которые расположены в абсолютном положении. Если я перетащу DIV B, он может переместиться куда угодно. Если я перетащу A, то DIV B переместится на то же смещение, что и div A.

Однако, что я пока знаю, так это то, что, несмотря на возможность разместить div B где угодно, я хочу. При перемещении div A div B просто возвращается на место рядом с div A..

 $('.a, .b').draggable({
    drag: function(event, ui) {
        $('.a').css({
            top: ui.offset.top   'px',
            left: ui.offset.left   100   'px'
        });
    }
});

Есть ли способ, которым я могу добавить какой-нибудь «mouseoffset», чтобы заставить это работать?

Ответ №1:

Попробуйте это:

 $(function(){
    $('.a, .b').draggable({
        start: function(){
            if($(this).hasClass('b')){
                var p = $(this).position();
                $(this).data('lastLeft',p.left);
                $(this).data('lastTop',p.top);
            }
        },
        stop: function(){
            if($(this).hasClass('b')){
                $(this).removeData('lastLeft');
                $(this).removeData('lastTop');
            }
        },
        drag: function(event, ui) {
            if($(this).hasClass('b')){
                var p = $(this).position();
                $(this).data('lastLeft',p.left);
                $(this).data('lastTop',p.top);

                var dx = ui.position.left - $(this).data('lastLeft');
                var dy = ui.position.top - $(this).data('lastTop');
                $('.a').each(function(){
                    var p = $(this).position();
                    $(this).css({
                        left: (p.left   dx)   "px",
                        top: (p.top   dy)   "px"
                    });
                });
            }
        }
    });
});

Рабочая демонстрация jsfiddle:http://jsfiddle.net/dkJFh/1

По сути, он сохраняет начальную позицию B при каждом перемещении мыши, чтобы в следующий раз можно было вычислить смещение.

Ответ №2:

Пожалуйста, проверьте это. Я думаю, это может решить вашу проблему:

 $('#div1').draggable({
        drag: function(event, ui) {
        $('#div2').css({
            top: ui.offset.top   'px',
            left: ui.offset.left   100   'px'
        });
    }
});

Комментарии:

1. Хорошая попытка, но не совсем. Обратите внимание, что когда вы перемещаете div1 после того, как куда-то переместили div2, div2 возвращается на свое первоначальное место, прикрепленное к div1… истинное решение состояло бы в том, чтобы div2 оставался на том же месте, куда бы он ни перемещался, но при перемещении div1 div2 перемещал бы то же смещение, что и div1. Хотя это только начало.

Ответ №3:

Вы можете достичь желаемого эффекта, подумав о проблеме немного по-другому. Вложение B в A позволит вам сделать это легко (несмотря на обходной путь IE):

HTML:

 <div class='a' style="position:relative;">
  <p>div A</p>
  <div class='b' style="position:absolute;">div B</div>
</div>

JAVASCRIPT:

 $('.a, .b').draggable({
});
// IE sucks, so must prevent bubbling on inner div else both divs
//    become draggable with strange results
$('.b').mousedown(function(e) {
    if($.browser.msie) {
         e.stopPropagation();
    }
});