having many events to manage, I opted for a select to dissect the events and drop them in the calendar, I made this <https://jsfiddle.net/max1974/mr5yxe7o/4/>
but I am faced with 2 problems .....
1 ° Initially the objects in the select drop into the calendar, but then if you select other items from the select the drop stops working.
2 ° while I drop the object from the mouse disappears and reappears only when I release it.
Could you help me please.
Please see my complete working jsfiddle:
https://jsfiddle.net/gq8eofyL/
You have to use helper() function to clone the element object inside select2 and avoid relative position hiding the element outside the select2 main <span>.
Like in this example:
helper: function(){
return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
}});
In addition, use Select2 events: https://select2.org/programmatic-control/events
in order to re-initialize draggables when Select2 recreates the elements, everytime you select/remove the elements (see my comment1 above):
function initSelectDraggable(){
$("ul.select2-selection__rendered li").each(function(){
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
revert: true,
revertDuration: 0,
helper: function()
{
return '<li class="select2-selection__choice ui-draggable ui-draggable-handle">'+$(this).attr('title')+'</li>';
}
});
});
}
Thanks it works great, now the problem remains that when I drop the event I lose data-id, data-num that I would need to save them in the DB and the event remains blue in the calendar instead of the chosen color.
Thanks again to everyone jsfiddle.net/max1974/bmqdax0f/57/
Related
I am creating the calendar where I can drop events from external list.
I took as example this sample - external-dragging.
I want to add specific logic that user can add only one event per day.
So for preventing dropping to 'filled' cell I am trying to use dropAccept method in the next way.
dropAccept: function (item) {
return [my condition];
},
I can get item that I am dropping from item element, I can get calendar's events but I can't get a cell (or a date) where I am putting my item.
How could I get a cell/date where I am dropping item?
Thank you.
I have solved this in another way.
I set all events as all day by default
I forbade an event overlapping
My code is:
$('#calendar').fullCalendar({
allDayDefault: true,
eventOverlap: false,
});
You can use drop function of full calendar.
Here is parameters
function( date, jsEvent, ui ) { }
Enjoy!
Simplest to see in a jsfiddle
Links to jsfiddle must be accompanied by code, therefore I am copying the js here:
$('.row').sortable({
placeholder: 'cell placeholder',
forcePlaceholderSize: true,
items: '.cell',
connectWith: '.row',
dropOnEmpty: true,
distance: 0.5,
tolerance: "pointer",
start: function() {
$('.row').css('min-height','30px');
},
stop: function(event, ui){
$('.row').css('min-height','');
}
});
the problem is, if I have two or more rows and one of them is being made visible after the cell is clicked on to being the drag, then the empty row cannot be dropped into unless the call is first hovered over another non-empty possible destination.
To see this in practice, click on the cell "iop" and try and drag it down into the thrid row. It doesn't work. BUT, if you click on the cell "iop", drag it up into the first row and then - without releasing it - back down into the third row, it does!
I presume that this has something to do with when sortable builds its internal list of possible targets. But, is there any way to make the empty row visible only once the dragging has started, and still have it targetable?
Refreshing sortable seems to do it:
$('.row').sortable('refresh');
https://jsfiddle.net/kfdmn9nm/
I'm trying to combine jQuery UI's draggable, droppable, selectable AND sortable libraries, to create a web interface for drag-selecting elements and dropping them into another area. The user will be able to remove items from the droppable area should they need to, and also control/cmd + click to select specific items without dragging.
So far I've made a pretty decent effort, but I'm having issues when it comes to adding "removed" items back into the original list of selectable items. The drag-selecting works well with these items (that are re-created dynamically), but my main problem is when control/cmd + clicking items once they have been added back to the original list.
To recreate the issue, add items to the second droppable area and then remove them (by clicking on them). Once the items are back in the original list, control/cmd + clicking the items you deleted doesn't select them properly, so when you go to drag these items, only one is added (instead of the correct amount).
Here's a jsfiddle: http://jsfiddle.net/b8key7Lw/
And here's the code I'm having difficulty getting to work once the #selectable > div items are dynamically created (around line 45 in the jsfiddle):
$("body").on("click", "#selectable > div", function(e){
if (e.metaKey == false) {
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
$(this).removeClass("ui-selected");
}
else {
$(this).addClass("ui-selecting");
}
}
$( "#selectable" ).data("ui-selectable")._mouseStop(null);
});
I have an interactive basket whereby the user can drag and drop an item into the basket. However, the same item cannot be placed in the basket twice (but it remains visible, albeit faded), so once it is in the basket, the draggable property must be disabled.
I tried doing this:
$("#product_badges li:not(.on)").draggable({
// Options here
});
However, as this just initiates the draggable() property, the element is still draggable even if I do add the on class to it when it has been dropped.
I therefore cannot see a way of achieving this without having several instances for the draggable property like so:
$("#product_badges li:not(.on)").each(function(){
$(this).draggable({
// Options here
}
});
With the above method I can then call the individual product_badge and disable dragging like so:
This only gets called once the item has been placed into the basket (dropped)
$('.item',$('#product_badges')).draggable('disable');
Is there a better way of achieving this? Can you set an HTML element to only be draggable if it does not have a particular class?
Update
See example here: http://jsfiddle.net/mB6GK/2/
use the cancel property.
$("#product_badges li").draggable({ cancel: ".no" })
fiddle:
http://jsfiddle.net/sGguz/
You could use the start event,
$("#container").draggable({
start: function( event, ui )
{ return !$(ui.helper).hasClass('nodrop'); }});
http://jsfiddle.net/mB6GK/4/
As the question states, I'm trying to combine jQuery UI's Selectable and Draggable functions into a working drag-n-drop interface with the user being able to select multiple divs and move those divs into jQuery Droppables.
Here is the code I have to allow the user to select divs across a row in a table:
$('tr').selectable({
filter: 'div',
selected: function(event, ui) {
$(ui.selected).draggable({
containment: 'document',
axis: 'y',
snap: true,
snapMode: 'inner',
revert: 'invalid',
opacity: 0.8,
drag: function(e, ui) {
$('.ui-selected').css({
top : ui.position.top //Y-Axis Only
});
$('.ui-selected').addClass('ui-draggable-dragging');
},
stop: function() {
$('.ui-selected').removeClass('ui-selected ui-draggable');
}
});
}
});
As you can see, I've tried adding the known classes that jQuery UI adds to elements being dragged/selected/etc, but the only element that seems to act as an actual draggable is the one that the user has clicked on (is actually dragging).
My desire is to have the user drag the entire selected group, and have them all act as draggables (ie: revert on invalid, snap to droppable, etc)
Does anyone have any idea how to do this or where to go from here?
Also, here is a jsfiddle to demonstrate exactly what I mean (and where I'm currently at on this). You might have to resize the results view so the table cells are all the same width.
Simulate the behavior.
when selecting multiple item just mark them as selected manually (e.g. checkbox, add custom style, etc)
when dragging use draggable option helper to define custom clone helper : function(){
return "<p>custom item</p>"
},
this will hide individual items. And you can customize as you want.
Custom drop implementation which using those selected items to append into the proper place.