Jquery ui jquery ui拖放显示反馈

我在我的网站上有一些拖放功能，我想在单击/开始拖动可拖动元素时，用边框颜色的改变高亮显示可拖放的区域。如果单击/或拖动停止，我希望可拖放元素的边界更改回其原始状态，我目前有此代码，但它工作得不太好

    $(".drag_check").draggable({helper:"clone", opacity:"0.5"});
$(".drag_check").mousedown(function() {
    $('.searchPage').css("border", "solid 3px #00FF66").fadeIn(1000);
});
$(".drag_check").mouseup(function(){
    $('.searchPage').css("border", "solid 3px #E2E5F1").fadeIn(1000);
})
$(".searchPage").droppable({
    accept:".drag_check",
    hoverClass: "dropHover",
    drop: function(ev, ui) {
        var droppedItem = ui.draggable.children();
        cv_file = ui.draggable.map(function() {//map the names and values of each of the selected checkboxes into array
            return ui.draggable.children().attr('name')+"="+ui.draggable.children().attr('value');
        }).get();
        var link = ui.draggable.children().attr('name').substr(ui.draggable.children().attr('name').indexOf("[")+1, ui.draggable.children().attr('name').lastIndexOf("]")-8)
        $.ajax({
            type:"POST", 
            url:"/search",
            data:ui.draggable.children().attr('name')+"="+ui.draggable.children().val()+"&save=Save CVs",
            success:function(){
                window.alert(cv_file+"&save=Save CVs");
                $('.shortList').append('<li><span class="inp_bg"><input type="checkbox" name="remove_cv'+link+'" value="Y" /></span><a href="/cv/'+link+'/">'+link+'</a></li>');
                $('.searchPage').css("border", "solid 3px #E2E5F1").fadeIn(1000);
            },
            error:function() {
                alert("Somthing has gone wrong");
            }
        });

    }
});

$（“.drag_check”）.draggable（{helper:“clone”，不透明：“0.5”}）；
$（“.drag_check”）.mousedown（函数（）{
$（'.searchPage'）.css（“边框”，“实心3px#00FF66”）.fadeIn（1000）；
});
$（“.drag_check”）.mouseup（函数（）{
$（'.searchPage'）.css（“边框”，“实心3px#E2E5F1”）.fadeIn（1000）；
})
$（“.searchPage”）.Dropable({
接受：“.拖动检查”，
hoverClass:“dropHover”，
下拉：功能（ev、ui）{
var droppedItem=ui.draggable.children（）；
cv_file=ui.draggable.map（function（）{//将每个选中复选框的名称和值映射到数组中
返回ui.draggable.children（）.attr（'name'）+“=”+ui.draggable.children（）.attr（'value'）；
}).get（）；
var link=ui.draggable.children（）
$.ajax({
类型：“POST”，
url:“/search”，
数据：ui.draggable.children（）.attr（'name'）+“=”+ui.draggable.children（）.val（）+“&save=save CVs”，
成功：函数（）{
警告（cv_文件+“&save=save CVs”）；
$（'.shortList'）。追加（'
'）；
$（'.searchPage'）.css（“边框”，“实心3px#E2E5F1”）.fadeIn（1000）；
},
错误：函数（）{
警惕（“某些事情出了差错”）；
}
});
}
});

将

activeClass

选项添加到您的

.droppable（）

调用中，将其设置为在拖动处于活动状态时要应用的任何类：

$(".searchPage").droppable({
    accept:".drag_check",
    activeClass: "ui-state-hover",
    hoverClass: "dropHover",
    // ..

有关此功能的演示，请参见jQuery UI文档：