We Keep Coding

activeClass droppable's option equivalent to sortable [jQueryUI]

In a draggable-droppable combination:
while an element is being dragged if we have specified the option activeClass: "ui-state-hover", in the droppable section all the available droppable elements change their background-color and when the element be dropped in any of these their background-color returns to their initial.
How can that be accomplished using the sortable?
As far as i know activeClass does not exist in sortable.
So When i start dragging-sorting an element the others of the same class should change background color as a way to show where it should me dropped..
any ideas??thanks in advance

After some research i finally came up with the solution
Using start and stop event of sortable i solved my task in hand
$("#reportTable").sortable({
items: 'tr',
revert: true,
helper: _$helperValue,
placeholder: "placeholder",
containment:"#reportTable",
start: function (event, ui) {
cls = ui.helper.attr("class");
$('tr[class*="' + cls + '"]').addClass('placeholder');
},
stop: function (event, ui) {
$('tr[class*="' + cls + '"]').removeClass('placeholder');
}
}).disableSelection();
After i created a class in my css file where i change background-color
then each time start event is fired i store the classname of the element which is being crabbed and then i add a class(placeholder) to the elements with the same class.
Finally in the stop event i remove the class and its done!!!

Get notified about dragged images within a contenteditable div

I have a div which has contenteditable="true" and which contains some html. This html may include images.
Since contenteditable="true" the user can move images by dragging them to a new position. But I need my code to be notified each time a image is moved, in a way where I get both the image element which is being moved, and the target node where the image is dropped. How do I do that?
My current solution adds a Drop listener to my div element which is contenteditable, and then I do get a drop event each time the user moves an image, but I can't get the dom node with the image which the user moved.
Also: Dragging an image, seems to copy the DOM node, instead of moving it. Is this true? (Tested in firefox).

I would suggest a following pure JavaScript solution
HTML:
<div id="space" contenteditable="true">
Hello <img width="300" class="contentImg" src='http://www.independent.co.uk/incoming/article9859555.ece/alternates/w620/Dr-Talyor.jpg'/> dude!
</div>
CSS:
#space {
width: 500px;
height: 500px;
background-color: #000000;
color: #ffffff;
}
JavaScript:
var draggedImg;
document.addEventListener("dragstart", function( event ) {
// IE uses srcElement, others use target
var targ = event.target ? event.target : event.srcElement;
if (targ.className == 'contentImg'){
draggedImg = event.target;
}
}, false);
document.addEventListener("dragend", function( event ) {
if(draggedImg){
alert("It's moved!");
console.log('Here is data', draggedImg);
draggedImg = null;
}
}, false);
You'll find an image node in draggedImg variable.
Please review a working example here: http://jsfiddle.net/o09hLtch/2/

jQueryUI features draggable and droppable interactions. Draggable has drag event, which gives you the dragged element and droppable has drop event, which gives you the dropped element as well as where it was dropped.
Quick example: clickety
$('#content .dr').draggable(
{
addClasses: false,
drag: function(event, ui)
{
$('#notify').text('Bird (#' + $(this).attr('id') + ') being dragged: ' + JSON.stringify(ui));
},
stop: function(event, ui)
{
$('#notify').text('');
}
});

I think You looking for this,
$(function () {
$(".image").draggable({helper: 'original'});
$(".container").droppable({
drop: function (event, ui) {
$(this).append(ui.draggable.css({position: 'static'}));
alert('dropped!');
}
});
});
For JSFiddle Demo Let's see
Good Luck ['}

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;
}

How to workaround jQuery UI droppable bug where over/out do not fire if draggable element is dragging before droppable bound

I have a list of draggable objects and a droppable target. The view housing the droppable target gets created and rendered when dragging starts. I've attached some images highlighting the desired action to the bottom of the post.
The issue is that jQuery UI appears to have a bug. This post: Droppable items not displaying hoverClass if they are shown during drag operation seems to corroborate that belief.
I have this code which enables draggable-ness:
this.$el.find('.videoSearchResultItem ').draggable({
helper: function() {
var helper = $('<span>', {
text: VideoSearchResultItems.selected().length
});
return helper;
},
appendTo: 'body',
containment: 'DOM',
zIndex: 1500,
cursorAt: {
right: 20,
bottom: 30
},
start: function (event, ui) {
var draggedVideoId = $(this).data('videoid');
var draggedVideo = VideoSearchResultItems.get(draggedVideoId);
draggedVideo.set('selected', true);
$(ui.helper).addClass("ui-draggable-helper");
}
});
My program has an event listener for a video search result becoming selected. When one becomes selected, the 'AddItems' view renders itself and transitions in.
this.listenTo(VideoSearchResultItems, 'change:selected', function (changedItem, selected) {
if (selected && this.addItemsView === null) {
this.addItemsView = new AddItemsView();
this.$el.append(this.addItemsView.render().el);
this.addItemsView.show();
}
});
AddItemsView initializes droppable during render:
this.$el.find('i.droppable').droppable({
hoverClass: 'icon-drop-hover',
tolerance: 'pointer'
});
Unfortunately, if my draggable is already dragging when the view is rendered -- hoverClass fails as well as the 'over' event.'
I'm wondering if there's any workaround for this? I don't see one.

The solution to this was to set the draggable element's "refreshPositions" option to true. This causes it to inform the droppable even if the droppable is created late.

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);