I have a home page with table and a few 'favorite' folders. These folders are for holding 'favorite' rows of information. Users drag and drop specific rows of information from the home table to the folder table. Rather than dragging the entire row (because my rows are very wide, and it can be unclear which folder you are dropping this row into), I have an icon before each case number that will ideally hold the information for said row. In this case, it's an arrow. What I need to happen is when you drag this arrow and drop it in this folder, the information from the 'dragged row' will append to the according 'favorite' table. This icon should disappear on drop, along with the corresponding row from the home page. Double clicking the folder will 'open' this folder to view favorite rows, both old and newly dropped. Here is my fiddle
$( ".drag" ).draggable({ revert: "invalid" });
$( ".dropTarget" ).droppable({
drop: function( event, ui ) {
var dropped = parseInt($(this).attr('title')) + 1;
$( this )
.attr('title',dropped+' entries');
var delay = $(this);
delay.prop('disabled', true).addClass('ui-state-highlight')
setTimeout(function() {
delay.prop('disabled', false).removeClass('ui-state-highlight');
}, 2000)
}
});
$( ".dropTarget" ).dblclick(function() {
$( ".fav1table" ).fadeIn();
$( ".main" ).hide();
//$(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
});
First of all, I recommend you to change the cursor type while hovering the arrow. This will help the user. What you need is to determine what lines allready have been added to favorite. A solution can be to create two CSS classes. normal and favorite. For each line that have already been "favorized", add class favorite. So you will have some arrows like class="drag favorite". In the CSS just set "favorized" arrows as invisible or undisplayed.
On the drop event of the .droppable() method, add the class "favorite" to the dropped arrow. So it will be not visible anymore. You can re-use this class later in a selector, to select all favorite rows for instance...
Related
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/
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´m useing a layout like http://masonry.desandro.com/methods.html#layout and is wondering if there is a way to only have one item active at them time. So that when you expand a new item a the one you currently have open goes back to its original form (removes class="is_expanded") . I´ve quite new to programming and don´t really know where to stat to look, tried configuring How do I remove class from previous selection when clicking additional item? but with no luck
classie.toggle( event.target, 'gigante' );
That is the part that does the magic - it adds a class 'gigante' which then makes it 4*4 (or whatever)
If you want to make only one be expanded at a time then
eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'item' ) ) {
return;
}
// change size of item via class
$('.item').removeClass('gigante'); // add this line
classie.toggle( event.target, 'gigante' );
// trigger layout
msnry.layout();
});
What the line I added does is remove all 'gigante' class from the items and then the toggle will add that class to the item again.
$('.item') is just a class that every item has.
This answer assumes that only expanded items will be called 'gigante'.
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.
I have a requirement that very closely matches this Jquery demo, which is a simple shopping cart demo. Basically I need to make two enhancements into this demo.
I need a text input alongwith with the available "products". So when I drag-drop one of the products, the text fields should be dragged along with that, which will be filled by user in the "cart" field.
I need a "cross" in front of each item in cart, which can be used to delete a certain item. Jquery's "destroy" function doesn't seem to do that. So how can I accomplish deletion of items from shopping cart?
Thanks for all the help.
You can specify your own "helper" on the draggable definition. Whatever html you specify as your helper is what will be shown during the drag animation. In your sortable (the drop area in the demo) you can override the beforeStop function. In there you can replace the item with whatever you want to be actually dropped into your shopping cart. In that, you could add the X button with javascript or something to remove the item
I recently implemented this to drag from a datatable into a list, so had to convert the tr into an li. It works in jQuery 1.4 but I get strange results on the drop when I drag out of the top in 1.5, and I haven't resolved that yet. Here's my helper defintion
helper: function() {
var text = this.children[0].innerText;
var result = "<li id='"+this.id+"'>"+text+"</li>";
return result;
},
and here's my beforeStop function
beforeStop: function( event, ui ) {
var id = ui.helper.attr( "id" );
var text = ui.helper.text();
var li = "<li id='"+id+"'>"+text+"</li>";
$(ui.item).replaceWith( li );
}