2014-01-10 123 views
0

我對jQuery沒有太多經驗。關於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" }); 
}); 

回答

0

這裏有一個更新的fiddle

您最好從jQuery文檔中閱讀有關Droppable的文章。基本上,你在半路上還有,你需要做的元素(藍框,編號menuElement2)可投放到一個拖動元素

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

內降功能(當塊是這個發射提供目標放在目標上),你需要執行你的行動。

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

這增加了自定義CSS規則來改變顏色的機身,再次檢查了jQuery的文檔 - 搜索「jQuery的CSS」。

希望這有助於:)

更新:我剛剛更新的小提琴再次使其恢復到棕色當您更改選擇 - 不知道,如果你想這一點,但它可以通過註釋掉的CSS很容易地刪除在拖曳功能內改變。

+0

哇,謝謝你,你真棒 – BorHunter