О перетаскиваемых элементах в jQuery

Question

У меня нет большого опыта работы с jQuery.

У меня есть 4 li элементы и перетаскиваемый блок. Когда я перетаскиваю из зеленого в синий, сначала мне нужно, чтобы мой блок перетаскивания стоял за синим и не выходил из границ контейнера, а это означает, что мой перетаскиваемый элемент должен всегда защелкиваться в контейнере.

Когда мой перетаскиваемый элемент стоит за синим цветом, цвет фона должен быть изменен с коричневого на красный.

Может кто-нибудь мне помочь? Потому что я действительно не знаю, как это сделать. Все, что у меня есть на данный момент: JSFiddle

HTML

<div id="container" class="ui-widget-header"> 
<div id="draggable" class="ui-widget-content"></div> 
<ul id="menu"> 
    <li id="menuElement1"></li> 
    <li id="menuElement2"></li> 
    <li id="menuElement3"></li> 
    <li id="menuElement4"></li> 
</ul> 
</div> 

CSS

body { 
    background-color: brown; 
} 
#container { 
    position: relative; 
} 
#menu, 
#draggable { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#draggable { 
    width: 100px; 
    height: 150px; 
} 
#menu { 
    margin-left: -40px; 
} 
ul li { 
    display: block; 
    float: left; 
    padding: 50px; 
} 
#menuElement1 { 
    background-color: green; 
} 
#menuElement2 { 
    background-color: blue; 
} 
#menuElement3 { 
    background-color: black; 
} 
#menuElement4 { 
    background-color: red; 
} 
#container { 
    height: 150px; 
    width: 100%; 
    background-color: gray; 

JQuery

$(function() { 
    $("#draggable").draggable({ snap: ".ui-widget-header" }); 
}); 

Answer 1

Вот обновленный fiddle

Вам следовало бы прочитать эту статью по адресу Droppable из документов jQuery. В основном вы были на полпути, вам нужно сделать элемент (синяя коробку, с идентификатором # menuElement2) Droppable обеспечить цель для перетаскиваемого элемента

$('#menuElement2').droppable({ 
    drop: function(event, ui) { 
    //Do something here... 
    } 
}); 

В рамках функции перетаскивания (это вызывается, когда блок упал на цель), вам необходимо выполнить свое действие.

$('body').css({'background-color': 'red'}); 

Это добавляет пользовательские правила CSS к телу, которое меняет цвет, снова проверить JQuery DOCS - поиск «JQuery CSS».

Надеется, что это помогает :)

Обновления: Я только что обновил скрипку снова, чтобы сделать его вернуться к коричневому, когда вы меняете выбор - не уверен, что если вы хотите этого, но его можно легко удалить, закомментировать CSS изменение в функции перетаскивания.