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!!!
Related
Recently I've been trying to get the id="whatever-id" attribute of a Div that is being dragged, but I haven't succeeded so far. Below you'll find my code (only the dragging part) where I try to get this ID attribute with ui and event objects, but I can't see where is the problem on it.
$(function()
{
$( ".action-zone" ).draggable(
{
scroll: true,
helper:"clone",
snap: ".actionDropAreaMovebleAction",
snapMode: "inner",
snapTolerance: 50,
opacity: 0.7,
forcePlaceholderSize: true,
forceHelperSize: true,
start: function( event, ui )
{
alert(ui.draggable.attr("id"));
//INSERT THE DROP ZONE DIV IN ALL ELEMENTS EXCEPT ON THOSE WHOSE CLASS IS DRAGGINGACTION
$( ".action-zone:not(.draggingAction)" ).after( "<div class='actionDropAreaMovebleAction'>\n\
<div class='plus'>\n\
<i class='fa fa-hand-o-down'></i>\n\
</div>\n\
</div>" );
$(".actionDropAreaMovebleAction").addClass("highlighted");
makeActionsDroppable();
},
stop:function( event, ui )
{
$(".actionDropAreaMovebleAction").removeClass("highlighted");
$("div").remove(".actionDropAreaMovebleAction");
$(this).removeClass("draggingAction");
//alert("hallo");
}
});
});
As you can see I try to "alert()" the attribute ID of the DIV element with class "action-zone" just for test purpose, but when the alert comes I get an "undefined" element back.
Does anyone have any idea why this' been happening ?
I thank you in advance.
You can only use ui.draggable to get the draggable object when dropping it to somewhere else, like you can catch the object in droppable:
$(".drop-zone").droppable({
drop: function(event, ui) {
console.log(ui.draggable); // will give you the draggable object
}
});
However, in your draggable's start event, you might get the id of you object like this:
$(".action-zone").draggable({
start: function(event, ui) {
console.log(ui.draggable); // will give you undefined
console.log(event.target.id); // will give you the id
console.log(event.target.attr('id')); // error!
console.log($(event.target).attr('id')); // will give you the id
}
});
I have a droppable unordered list named <ul class="droppable">. Inside the unordered list I have dynamicly generated list items named <li class="placeholder"></li>, which are also droppable.
When dropping a draggable item between a placeholder, all works fine. But when dropping a draggable item on the <li class="placeholder"></li> itself, the draggable item gets appended to the placeholder and the unordered list.
So I get a double clone of it.
Here's a jsfiddle to have a visual example. I'm aware that it is logical that I get a double clone on my page, but I don't know how to disable it...
Any help is greatly appreciated!
UPDATE: If you drag a draggable item verticaly over a droppable element, they append automatically? How is that possible?
One approach you could try to solve this would be to move all your behaviors to your sortable and use droppable only to make a switch to determine the behavior you need. That way, you can handle everything at one place, which should resolve some of the unwanted effects of having both sortable and droppable on the same elements. Like this:
In your droppable you set the switch on over and out, and set the objects you need.
$("li.placeholder").droppable({
accept: "li.to-drag",
hoverClass: "correct",
activeClass: "active",
revert: false,
tolerance: "pointer",
over: function (e, ui) {
curDrag = ui.draggable;
curTarget = e.target;
curThis = $(this);
overSortable = true;
},
out: function (e, ui) {
overSortable = false;
},
drop: function (event, ui) {
}
});
Then, in beforeStop event of sortable, you check if the variable overSortable is true or not and set the behaviors there. All that refers to ui.draggable, this, and event.target will need to be replaced by the objects you set in droppable. An event better way would be to make a function handling all these behaviors and pass these as arguments.
beforeStop: function (e, ui) {
if (overSortable) {
curDrag.addClass('placeholder');
var dragging = curDrag.find("img").remove();
curThis.append(dragging).addClass("dropped");
curThis.droppable('disable');
var day = curDrag.attr('data-id');
var index = $(curTarget).index();
//...
} else {
ui.item.addClass('placeholder')
}
There are still adjusments to make, it's not completely clear what exactly should happen and when, but this can make it easier to work instead of trying to manage multiple events being fired when you drop an element, you only manage one.
http://jsfiddle.net/ts290vth/4/
Managed to get it working for you:
function dropping () {
$("li.placeholder").droppable({
accept: "li.to-drag",
hoverClass: "correct",
activeClass: "active",
revert: false,
tolerance: "pointer",
drop: function (event, ui) {
var dragging = ui.draggable.find("img");
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
var day = $(ui.draggable).attr('data-id');
var index = $(event.target).index();
$(this).attr("data-id", day);
$(this).attr("date-order", index);
$(this).addClass("drop-"+ index);
$(this).attr("data-content", "");
NOTICE: the var dragging = ui.draggable.find("img"); this line was making you duplicated copies at drag and drop so you just had to remove the clone();.
it created clones of your dragged items at dest.
Now Notice this:
$("#dropzone").droppable({
accept: "li.to-drag",
revert: false,
tolerance: "pointer",
drop: function (event, ui) {
$(this).append(dragging);
//$("li.to-drag").addClass("placeholder");
$(this).droppable('disable');
}
});
}
Something with the placeholder class is causing you troubles.
Hope this helps.
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;
}
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.
I have tried to drag the dropped element which is a clone of the dragged element, but when I drag the element it create a another element in the page. Here is my code..
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function () {
return jQuery(this).clone().appendTo('body').css({'zIndex':5});
},
cursor: 'move'
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
jQuery(this).append(jQuery(ui.draggable).clone().draggable());
}
});
});
Is there any missing command which makes every drag make a new clone?
You should had a class in order to indicate that element has been dropped and that you can move it but you should not clone it.
You can have a look at this fiddle : http://jsfiddle.net/scaillerie/njYqA/ .
In the handler for drop, I have just replace by this code :
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
jQuery(this).append(jQuery(ui.draggable).clone().draggable()); Did you forget .clone()