JQuery UI перетаскивания показывает обратную связь - PullRequest
Новая
       27

JQuery UI перетаскивания показывает обратную связь

0 голосов
/ 20 апреля 2010

У меня есть некоторые функции перетаскивания на моем веб-сайте, я хочу выделить область, которую можно сбрасывать, с изменением цвета границы, когда перетаскиваемый элемент нажимается / начинает перетаскиваться. Если щелчок или перетаскивание прекращается, я хочу, чтобы граница элемента droppable вернулась в исходное состояние, у меня в настоящее время есть этот код, но он работает не очень хорошо. 

    $(".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");
            }
        });

    }
});

1 Ответ

1 голос
/ 20 апреля 2010

Добавьте опцию activeClass к вашему вызову .droppable(), установив для него тот класс, который вы хотите применить при активном перетаскивании: 

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

См. Документацию по пользовательскому интерфейсу jQuery для демонстрации этой функции:

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

...