我如何突出使用jQuery UI拖動懸停可投擲區域

我實際上有兩個問題，標題中的主題是主題。我在頁面上有多個div元素標記爲droppable。在這些div元素中，我有跨度被標記爲可拖動的。我想要它，所以當你拖動一個元素，並且它懸停在一個可放置的區域時，該區域突出顯示或有一個邊框，以便他們知道可以放在那裏。作爲第二個問題，我所有的可拖動元素都有一個display：block，一個寬度和一個浮點數，所以它們在我的可拖放區域看起來很漂亮整齊。當物品掉落時，他們似乎獲得了一個位置，因爲它們不再像我的其他物品那樣漂浮漂亮和整齊。作爲參考，這裏是我的JavaScript。我如何突出使用jQuery UI拖動懸停可投擲區域

$('.drag_span').draggable({ 
    revert: true 
}); 
$('.drop_div').droppable({ 
    drop: handle_drop_patient 
}); 

function handle_drop_patient(event, ui) { 
    $(this).append($(ui.draggable).clone()); 
    $(ui.draggable).remove(); 
}

來源

2012-03-26 Jhorra

有你看着http://jqueryui.com/demos/droppable/#visual-feedback – j08691 2012-03-26 20:40:59

就是這樣，這麼明顯。 – Jhorra 2012-03-26 20:46:25

我會將其作爲答案發布。 – j08691 2012-03-26 20:48:38

結賬http://jqueryui.com/demos/droppable/#visual-feedback。

例：

$("#draggable").draggable(); 
$("#droppable").droppable({ 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
       .html("Dropped!"); 
    } 
}); 
$("#draggable2").draggable(); 
$("#droppable2").droppable({ 
    accept: "#draggable2", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
       .html("Dropped!"); 
    } 
});

來源

2012-03-26 20:49:21 j08691

這應該適用於懸停增加的一大亮點。

$('.drop_div').droppable({ 
    hoverClass: "highlight", 
    drop: handle_drop_patient, 
});

然後創建一個CSS類亮點，設置邊框或改變背景顏色或任何你想。

.highlight { 
    border: 1px solid yellow; 
    background-color:yellow; 
}

就職位而言，您可以重新申請css，一旦下降完成。

function handle_drop_patient(event, ui) { 
    $(this).append($(ui.draggable).clone().css({'float':'left','display':'block'})); 
    $(ui.draggable).remove(); 
}

來源

2012-03-26 21:00:14

+1感謝您寫下「drop：handle_drop_patient」。感激地，我現在知道我可以編寫單個函數並將其名稱放在那裏，而不是像匿名函數那樣完全實現。 – 2012-11-26 07:12:19

FYI：hoverClass已被棄用，取而代之的classes選項。現在應該是：

$('.drop_div').droppable({ 
    classes: { 
     'ui-droppable-hover': 'highlight' 
    }, 
    drop: handle_drop_patient 
});

來源

2016-10-21 14:06:24

我如何突出使用jQuery UI拖動懸停可投擲區域

回答

相關問題