Как я могу использовать jQuery, чтобы привязать упавший элемент внутри div? - PullRequest
Новая
       9

Как я могу использовать jQuery, чтобы привязать упавший элемент внутри div?

7 голосов
/ 05 января 2011

Я пытаюсь воссоздать панель действий World of Warcraft в учебных целях.

Пока у меня есть планка, и отдельные слоты можно открывать. Что я могу сделать, если желтый контейнер падает внутри контейнера, он центрируется ВНУТРИ элемента .item? 

@{
    ViewBag.Title = "Home Page";
}

<script language="JavaScript">
    $(function () {
        $(".draggable").draggable();
        $(".item").droppable({
            drop: function (event, ui) {
                $(this)
                .addClass("ui-state-highlight")
                .find("p")
                    .html("Dropped!");
            }
        });
    });
</script>

<div class="draggable">
</div>
<div class="bar">
    <div class="item">
    <p>a</p>
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>    
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

alt text

1 Ответ

7 голосов
/ 05 января 2011

Как насчет этого: 

$(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;

            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

Редактировать: Я заметил, у вас есть текст в цель div. Если вы хотите, чтобы это работало с другими элементами в буксируемом элементе, вы можете расположить перетаскиваемый элемент абсолютно и сместить его, используя left и top родительского элемента: 

var width = $this.width();
var height = $this.height();
var top = $this.offset().top;
var left = $this.offset().left;

var cntrLeft = (width / 2 - ui.draggable.width() / 2) + left;
var cntrTop = (height / 2 - ui.draggable.height() / 2) + top;

И 

ui.draggable.css({
    left: cntrLeft + "px",
    top: cntrTop + "px",
    zIndex:1,
    position: 'absolute'
});

Примечания:

  • ui.draggable - перетаскиваемый предмет, который был брошен на предмет падения.
  • $this.append(ui.draggable) добавляет перетаскиваемый объект к предмету сброса div, так что позиционирование может быть выполнено точно.

Проверьте живой пример здесь: http://jsfiddle.net/andrewwhitaker/F3sD3/

...