我如何突出使用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拖动悬停可投掷区域

回答

相关问题