Jquery перетащить - PullRequest
Новая
       21

Jquery перетащить

1 голос
/ 16 декабря 2009

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

У меня есть 2 собаки / овцы с каплями, и я хочу уронить их на рубашку.

Я бросаю овцу / собаку на рубашку, но как только она падает, она переходит в нижнее левое положение дел.

Я пытался сделать $('[id$="apparel"]').append(dropElem); вместо $(this).append(dropElem);

Может кто-нибудь помочь мне в этом?

это мой javascript 

$(".items").draggable({helper: 'clone'});
$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
        var dropElemId = ui.draggable.attr("id");
        var dropElem = ui.draggable.html();
        $(this).append(dropElem);
        alert("drop done");
    }
});

И HTML 

<div class="wrap">
    <div class="sourcearea">
        <span class="items" id="itemsheep">
            <img src="sheep.jpg" width="100">
        </span>
        <span class="items" id="itemdog">
            <img src="dog.jpg" width="100">
        </span>
    </div>
    <div class ="droparea">
        <img src="RedShirt.jpg" width="300" height="300" id="apparel">
    </div>
</div>

Ответы [ 3 ]

1 голос
/ 16 декабря 2009

Я не уверен, что вы на самом деле планируете делать здесь, но, похоже, вы пытаетесь добавить содержимое классов "ITEM" в свой класс "dropable". Я сказал это, потому что именно этим сейчас занимается ваш код.

  1. Если это так, вы должны поместить свойство "float: left" в свой класс "item". Это аккуратно сложит их горизонтально рядом друг с другом, начиная слева (вы также можете поставить небольшое правое поле с каждым элементом, чтобы их края не касались друг друга). Если размер для нового предмета меньше доступного горизонтального пространства, он будет перенесен на левый край предмета.

  2. Если вы хотите, чтобы «клон» ваших предметов «оставался на месте» там, где вы их бросили, вы можете использовать свойство «ui.position», чтобы сохранить их положение относительно сбрасываемого предмета.

  3. Если вы хотите, чтобы фактические перетаскиваемые элементы «прилипали» к вашему буксируемому элементу, удалите следующие строки: 

                        var dropElemId = ui.draggable.attr("id");
                    var dropElem = ui.draggable.html();


                    $(this).append(dropElem);

    И это сделано! Вы также можете удалить свойство перетаскивания элемента, чтобы «исправить» элемент внутри вашей рубашки.

Надеюсь, это поможет! ; -)

1 голос
/ 16 декабря 2009 
$(".items").draggable({helper:'clone'});

$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
       var ele = ui.draggable.eq(0);
       //position element where helper was dropped
       ele.css("position", "absolute");
       ele.css("top", ui.absolutePosition.top);
       ele.css("left", ui.absolutePosition.left);
       //comment next line out if items shouldn't be restricted to redshirt
       ele.draggable('option', 'containment', this);
       //comment previous line out and next in if items shouldn't be draggable anymore
       //ele.draggable('destroy');
       $(this).append(ele);
    }
});
0 голосов
/ 16 декабря 2009

Проверьте стиль на DIV после падения. Если он позиционируется как абсолютный, он плавает и т. Д.?

Также проверьте аналогичную проблему (плюс решение), которая была у меня несколько месяцев назад здесь, на переполнении стека . В нем говорится о другом решении "привязки" отброшенного элемента к контейнеру.

...