We Keep Coding

How to get element under mouse cursor while dragging another element?

I googled and found several answers but they was all about click or mousemove events which are not suitable for my question.
Basically I allow users to drag an item from a list and drop it on a folder in another list and I want to highlight element (in the folder list) whenever an item is dragging over it. Listening to mouseenter and mouseleave events on the folder list won't work. I tried with document.elementFromPoint in the dragging event (jQuery UI's Draggable drag) but unfortunately it returns the helper element instead of the element in the folder list. I think it's correct behavior since document.elementFromPoint returns the top most element under mouse cursor. But it doesn't solve my problem :(.
$("#filelist li").draggable({
helper: "clone",
drag: function (event, ui) {
console.log(event.pageX, event.pageY);
var element = document.elementFromPoint(event.pageX, event.pageY);
// element is helper element, instead of actual element under cursor which I want.
}
});
$("#folderlist").droppable({
drop: function (event, ui) {
}
});
// These mouse events won't be triggered while dragging an item.
$("#folderlist").on({
"mouseenter": function (event) {
this.style.backgroundColor = "#1c70cf";
},
"mouseleave": function (event) {
this.style.backgroundColor = "";
}
}, "li");

Apparently, the droppable has an hover function. http://jqueryui.com/droppable/#visual-feedback
$("#folderlist").droppable({
hoverClass: "ui-state-hover",
drop: function (event, ui) {
}
});
Then add this to your css :
.ui-state-hover
{
background-color: #1c70cf;
}

jQuery: event "mouseover"-like

I need an event, that invokes everytime I move my mouse above some HTML element. But I need it to fire off all the time I am moving, not just when I enter some element (like the mouseover, mouseenter or hover event does).
I saw a lot of people were trying to do just opposite functionality few years ago (mouseover element was firing of all the time I was hovering above some div) but everytime I was testing this event, it fired off only when I entered some div. I need it to fire off everytime I move my mouse and I am above watched element so I can determine mouse relative position to that element.
Is there an event I am missing or is there some workaround how to track mouse position within some element based just on hovering(not click, dbclick, ..)?

Add the mouseover event, then bind to the mousemove.
I made you a small example to see the coordinates while you are moving over a div.
$("#mydiv").bind('mousemove', function(event)
{
var offsetleft = this.offsetLeft;
var offsettop = this.offsetTop;
var coordX = event.pageX - offsetleft;
var coordY = event.pageY - offsettop;
$("#coords").html("X: " + coordX + " Y: " + coordY);
});
http://jsfiddle.net/dVqwH/2/

Try to use mousemove: http://api.jquery.com/mousemove/
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$( "#log" ).append( "<div>" + msg + "</div>" );
});

you can bind to the mousemove jQuery event
$( "html" ).mousemove(function( event ) {
...
});
jsFiddle demo
In the examples I bind to all the document but you can easily bind to the element of interest with jquery selectors

Implementing drag and drop

I am trying to implement a simple Drag and Drop and was wandering if there are other methods of implementing it that doesn't require mouse down, mouse move and mouse up events. The reason is because my mouse up event fires an attached event on the page before my drag and drop mouse up event. I don't know how to get it to fire appropriate so I'm seeking alternative methods.

You could try using jquery UIs http://jqueryui.com/draggable/ and http://jqueryui.com/droppable/ to achieve what you want, the combination of both allows you to make a lot and its easy as the documentation has some examples to get started and you can find lots of examples like this one: http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
to make it work on mobile devices (touch events) compatible use this script. makes jquery ui mobile compatible: touchpunch.furf.com
I made a jsfiddle that shows an example of how you could use jquery ui droppable and draggable:
http://jsfiddle.net/mMDLw/2/
// jquery closure
(function($, window, undefined) {
// on dom ready
$(function() {
initializeDropzone();
initializeDraggables();
});
/**
*
* intializing the dropzone element
*
*/
var initializeDropzone = function() {
// initialize the dropzone to make the dropzone a droppable element
// http://jqueryui.com/droppable/
$('#dropzone').droppable({
accept: '.foo', // only elements with this class will get accepted by the dropzone
hoverClass: 'drop_hover', // css class that should get applied to the dropzone if mouse hovers over element
greedy: true,
drop: function onDrop(event, ui) {
console.log('#dropzone drop');
var droppedElement = ui.draggable;
console.log(droppedElement);
// create an object and fill it with data we extract from element that got dropped
var droppedElementData = {};
droppedElementData.id = parseInt(droppedElement.attr('data-foo-id'));
droppedElementData.name = droppedElement.text();
var dropLogElement = $('#dropLog').find('ul');
droppedElementData.position = dropLogElement.children().length + 1;
// create the list html to add a row about the dropped element to our log
var rowHtml = '';
rowHtml += '<li id="' + droppedElementData.position + '_' + droppedElementData.id + '">';
rowHtml += '<span class="position">' + droppedElementData.position + ') </span>';
rowHtml += '<span class="name">' + droppedElementData.name + '</span>';
rowHtml += '</li>';
var row = $(rowHtml);
// append the new row to the log
dropLogElement.append(row);
}
});
};
/**
*
* intializing draggable elements
*
*/
var initializeDraggables = function() {
// http://jqueryui.com/draggable/
// make all elements that have the class "foo" draggable
$('#droppables').find('.foo').draggable({
refreshPositions: true, // refresh position on mouse move, disable if performance is bad
revert: function(event) {
console.log('a "foo" got dropped on dropzone');
// if element is dropped on a dropzone then event will contain
// an object, else it will be false
if (event) {
// the event exists, this means the draggable element got dropped inside of the dropzone
console.log('YEP the event is not false');
// the element that is being dropped
var draggedElement = $(this);
// add explosion effect to dragged element
draggedElement.effect(
'explode',
1000,
function() {
console.log('drop scale effect finished');
console.log(draggedElement);
// put the element back to its original position
draggedElement.css('left', '0');
draggedElement.css('top', '0');
// make the element visible again by fading it in
draggedElement.show('fade', {}, 1000);
}
);
return false;
} else {
// false because draggable element got dropped outside of the dropzone
console.log('NOPE no object, the event is false');
return true;
}
},
start: function(event, ui) {
// the user started dragging an element
console.log('#droppables .foo drag start');
},
stop: function(event, ui) {
// the user has released the draggable element
console.log('#droppables .foo drag stop');
}
});
// make all elements that have the class "bar" draggable (but the dropzone wont accept them)
$('#nonDroppables').find('.bar').draggable(
{
revert: true, // if the element did not get dropped in the dropzone or not accepted by it, then revert its position back to its original coordinates
start: function(event, ui) {
// the user started dragging an element
console.log('#nonDroppables .bar drag start');
},
stop: function(event, ui) {
// the user has released the draggable element
console.log('#nonDroppables .bar drag stop');
}
}
);
};
})(jQuery, window);

get Drop Target of component

Hi, I want to get Drop target className/ID after Drop Event. Does anybody tell me how to get ?
<div class="drop_1" id="drop1"></div>
<div class="drop_2" id="drop2"></div>
<div class="drop_3" id="drop3"></div>
all DIV component must be drag-able & drop-able onto each other

use the this.id inside the drop handler
jsFiddle demo
$( ".selector" ).droppable({
drop: function(event, ui) {
console.log(this.id);
}
});

Example
$(function() {
***/* Make draggable */***
$(".drop_1, .drop_2, .drop_3").draggable();
var dropOpts = {
accept:".drop_1, .drop_2, .drop_3",
drop:dropCallback,
greedy:true
};
/* Droppable */
$(".drop_1, .drop_2, .drop_3").droppable(dropOpts);
/*get your Drop target*/
function dropCallback(e) {
alert("The firing droppable was " + e.target.className);
}
});

how to return a draggable item to its initial position using jquery

I have a set of images placed as position:relative (showing one next to the other).
I use this code to drag and drop them (stolen from the jQuery API documentation, modified to my needs).
$(function() {
$( ".draggable" ).draggable({
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).offset();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
pos_left = Startpos.left; //pos_left is global
pos_top = Startpos.top; //pos_top is also global
},
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).offset();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
$(this).css('position', "fixed"); //tried absolute and relative, too
$(this).css('left', pos_left);
$(this).css('top', pos_top);
}
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
id = $(this).attr('id');
alert(id);
}
});
});
What I am trying to do is to return the draggable element to its initial position, after user drops it. However because my elements are relatively positioned the initial left,top coords are the same for all of them (or this is what I understand from the documentation -- I might be wrong here). So although images return, they actually stack each one on top of the other.
What am I doing wrong? What am I supposed to do?

Well. Instead of doing that by yourself use the revert option of the draggable. From the jQuery UI docks:
$( ".selector" ).draggable({ revert: true });

You could make its position relative, top=0px, and left=0px. Worked for me with this code:
$(function(){
$('#draggable').draggable().append('<a href=# class=exit>x</a>');
});
$(function(){
$('.exit').click(function(){
$('#draggable').css({
'top': '0px',
'left': '0px',
'position': 'relative'
});
});
});