Hi there,
I have some drag and drop functionality on my website, I am wanting to hightlight the area that is droppable with a chage in border color when the draggable element is clicked/starting to be dragged. If the click/or drag stops I want the border of the droppable element to change back to its origianl state, I currently have this code, but it does not work very well.
$(".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");
}
});
}
});
