jquery drag n drop mouse over effect?
Question
I'm trying to emulate the behavior of this drag n drop found here
How do I change the following code to get the mouse over effect with the rectangle outline? Also is it possible to have it sortable like the example above?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.demo { width: 320px }
ul { width: 200px; height: 150px; padding: 2em; margin: 10px; color: black; list-style: none; }
ul li { border: solid 1px red; cursor: move; }
#draggable { border: solid 1px #ccc;}
#droppable { border: solid 1px #ddd; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var selectedClass = 'ui-state-highlight',
clickDelay = 600,
// click time (milliseconds)
lastClick, diffClick; // timestamps
$("#draggable li")
// Script to deferentiate a click from a mousedown for drag event
.bind('mousedown mouseup', function(e) {
if (e.type == "mousedown") {
lastClick = e.timeStamp; // get mousedown time
} else {
diffClick = e.timeStamp - lastClick;
if (diffClick < clickDelay) {
// add selected class to group draggable objects
$(this).toggleClass(selectedClass);
}
}
})
.draggable({
revertDuration: 10,
// grouped items animate separately, so leave this number low
containment: '.demo',
start: function(e, ui) {
ui.helper.addClass(selectedClass);
},
stop: function(e, ui) {
// reset group positions
$('.' + selectedClass).css({
top: 0,
left: 0
});
},
drag: function(e, ui) {
// set selected group position to main dragged object
// this works because the position is relative to the starting position
$('.' + selectedClass).css({
top: ui.position.top,
left: ui.position.left
});
}
});
$("#droppable, #draggable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(e, ui) {
$('.' + selectedClass).appendTo($(this)).add(ui.draggable)
.removeClass(selectedClass).css({
top: 0,
left: 0
});
}
});
});
</script>
</head>
<body>
<div class="demo">
<p>Available items</p>
<ul id="draggable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>Drop Zone</p>
<ul id="droppable">
</ul>
</div>
</body>
</html>
2 answers
solution1
2 ACCPTED 2011-10-25 15:03:41
The link you posted has an example created without jQuery, and I have done the same several times myself with a slightly different approach.
I'm sure there is an easier way in jQuery UI draggable, and the documentation would be the first place to look.
However, to show how it's done in regular javacript without a library, wich should probably work with jQuery as well, as it uses regular event listeners, you would do something like this:
var dropzone;
dropzone = document.getElementById("dropzone");
dropzone.addEventListener("dragenter", dragin, false);
dropzone.addEventListener("dragleave", dragout, false);
dropzone.addEventListener("drop", drop, false);
This binds the events to functions, that would look something like this:
function drop(e) {
//do something when dropped
e.stopprop, preventdefault etc.
}
function dragin(e) {
//do something when dragged in
e.stop stuff
}
function dragout(e) {
//do something when dragged out, usually remove the stuff you did above
e.stop stuff
}
This is the way it's normally done, and just as mouseenter and mouseleave, the drag event listeners should work with jQuery, and you could probably use .bind(); to bind them to some sort of action in exactly the same way as the mouse events, allthough I have never tested this as I always do this without jQuery.
solution2
1 2011-10-25 15:04:20
I would have 2 classes. One with how the div looks normally, then another with how it should look when something is dragged over it (over, out). Then for the event handlers, I would toggle the classes.
Here is some sample code that will change the color of a div from silver to red as something is dragged over it:
<style>
.selectedCategory {
width: 200px;
height: 35px;
background: silver;
}
.selectedCategoryActive {
width: 200px;
height: 35px;
background: red;
}
</style>
<div id="element" class="selectedCategory"></div>
$('#element').droppable({
over: function(event, ui) {
$(this).toggleClass('selectedCategoryActive');
},
out: function(event, ui) {
$(this).toggleClass('selectedCategoryActive');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.