jQuery UI Draggable - need to modify element while dragging - javascript

I'm playing with Drag and drop funcitonality for the first time so I'm not entirely sure what I'm doing!
I need to add a class to a "portlet" while it is being dragged. I don't want to use the clone functionality because I want the user to drag the actual element, I just want to nodify the element while it is being dragged and reset it when it's dropped.
Can anybody help?

Perhaps there's some sort of a 'beforedrag' event you can bind to? It would be easier to add the class to an element before the user actually starts dragging it, rather than during.
If you're using jQuery UI, there's a 'start' event on draggable you can use:
http://docs.jquery.com/UI/Draggable#events

Also, you can use the "helper" option like this:
helper : function(ev, el) {
return ($(el).clone().addClass("beingDragged"));
}
Should your portlets become in the future too heavyweight to drag, you could use that to build a simplified version while dragging to smooth things out :)

Related

How to find out and control which elements gets scrolling keyboard events?

HTML has scrollable elements. At any given time one of them is going to receive keyboard scrolling controls like up/down arrow, pageup/pagedown etc.
How can I find out which element is currently active in this way, and how can I make an element active in this way?
Here's jsfiddle to demonstrate the issue.
I can click on e1, e2, e3, or e4. If I do, then arrow keys will scroll that element.
The obvious way to do this would be to call element.focus(). But that does nothing when called on a scrollable div, and document.activeElement keeps pointing to body not to any of them (the one that's actually active, or the one I tried to make active).
So:
is there some other DOM thing which controls it?
or is this functionality not exposed by browsers in any way?
or do I need to set a bunch of tabindex settings to access this state through JS, even though browsers can handle active scrolling status without any tabindex by theselves?
Use Event Listeners To Do So
function gg1(){
document.getElementById("focused").innerText = "e1"
}
function gg2(){
document.getElementById("focused").innerText = "e2"
}
document.getElementById("e1").addEventListener("scroll", gg1);
document.getElementById("e2").addEventListener("scroll",gg2);
This Code Is Just The Basic Version Of How You could achieve it. You can always minify it.

Allowing Items created on droppable event be draggable

I am working on a custom workflow style application. I am using jQuery UI for a drag and drop toolkit.
On dropping an item, I am rendering a bootstrap panel with various items in the body (depending on what was dropped).
Now, what I would like to do is allow these panels to be draggable again within the drop area, but I can't seem to achieve it.
Below is a link to the gist of the html. Ignore the linkme stuff, that's another aspect i'm working on. Ideally, the objects would be draggable anywhere within the solutions div.
https://gist.github.com/ajberry/0ab2c0adca4f92855b26b63f929b108d
I'm assuming it's something daft, and I have tried the following with no success:
$( ".panel-default" ).draggable();
As I thought this would allow each panel to be draggable. I'm guessing it's to do with my droppable event or something.
Regards
I added in the draggable attribute on the drop event. As prior to that the objects didn't exist so couldn't apply it.
function handleDropEvent( event, ui ) {
var rownum = $("#solution .panel-default").length;
console.log(rownum);
var draggable = ui.draggable;
var mytype = draggable.attr('class');
if (!(mytype.includes("panel-default"))){
renderChildControls(draggable.attr('id'), rownum)
}
$('.panel-default').draggable();
}

jQuery UI - programatically move a dropped draggable to another "available" droppable

I have a mini form control where I drag several draggables onto a scale. See my plunk
Ideally, whenever I drop a draggable, I would like to do in the stop( event, ui ) method:
check if the droppable already has a draggable (let's call it draggable2)
if there is draggable2, I would like to scan my droppables for one that does not have a draggable
then move draggable2 to this droppable
Are there APIs/ways to do this programmatically? I know this sounds similar to sortables, but I am strictly looking for the ability to
move a draggable to a droppable
and
to know if a droppable already has a draggable, and be able to identify the draggable
Any help will be greatly appreciated. Thank you.
I have found a way to accomplish this. Although there are no options from the jQuery UI draggables/droppables API, I have managed to track the draggables and droppables by adding unique "id" attributes to track them.
Here is how I approached the following:
move a draggable to a droppable
My approach: Find the coordinates of the target droppable, and update the css of the draggable.
To figure out which dragger was dragged and which dropper received it, I added attributes dragger-id and dropper-id so I could identify them during the drop event:
drop: function( event, ui ){
// Get the current dragger and dropper ID's
dropperId = $(this).attr('dropper-id');
draggerId = ui.draggable.attr('dragger-id');
// ... more code
}
then I calculated the top and left coordinates for the dragger based on the droppable's values. For this, I used the jQuery's offset() method.
drop_x = $('.droppable').offset().left - $('.draggable').offset().left;
drop_y = $('.droppable').offset().top - $('.draggable').offset().top;
Note: I had to do a difference calculation since draggables are positioned relative to where they start.
Finally, I set the top and left css values:
ui.draggable.css('top', drop_y+'px'); // y-axis
ui.draggable.css('left', drop_x+'px'); // x-axis
to know if a droppable already has a draggable, and be able to identify the draggable
For this, I created yet another attribute on the droppable elements to track the dragger-id values. I called it current-dragger so that it would be unique and I could query by it. I used -1 as my default value, meaning "no dragger".
I assigned current-dragger in the drop method as well:
drop: function( event, ui ){
// Get the current dragger and dropper ID's
dropperId = $(this).attr('dropper-id');
draggerId = ui.draggable.attr('dragger-id');
// Remove current-dragger value from old dropper (-1 means no dragger)
$('[current-dragger="' + draggerId + '"]').attr('current-dragger', '-1');
// Update current-dragger on this dropper
$(this).attr('current-dragger', draggerId);
// ... more code
}
I suppose there's really no need to do updates to the DOM attributes, so in prod I will be tracking the current dragger inside of a JavaScript mapping object.
For a full working example, see my updated plunk

JQuery UI - Append Draggable to Droppable

How do you append an item being dragged to a target element on drop, using jQueryUI's draggables/dropables? It looks like the way jQuery UI works right now is it just moves the items around on the screen via absolute positioning. Unfortunately, this functionality makes form submissions useless, as you cannot get the positions of the values on submission.
Thanks in advance for any items/pointers!
If I understood correctly, you want the dragged element to be detached from it's current parent and be appended to the new one, right? You can use a helper to do the dragging (so the original element is not affected) and, upon drop, detach it and append it to the target (thanks #Oleg and #Brian for improving over my original answer).
$(myDraggable).draggable({
helper:"clone",
containment:"document"
});
$(myDroppable).droppable({
drop:function(event, ui) {
ui.draggable.detach().appendTo($(this));
}
});
​
Working example at jsFiddle

jQuery UI Selectables - Start Drag-Selecting from Outside of Objects

I am using the jQuery UI Slectable http://jqueryui.com/demos/selectable/
Once initialized (just like in the demo on that link). drag-selecting only works if I start holding the mouse button on top of a object. If I start drag-selecting from outside of the objects, the selecting does not work.
Is there any way to enable it so the user can initiate the drag-selecting outside of the Selectable objects?
The mouse event listener in the 'selectable' is bound to the wrapper element that you have attached it to. By attaching the it to the body and providing a filter you can get what you're looking for.
Based on the jQuery example:
$('body').selectable({ filter: '#selectable li' });
*Edit:
Unfortunately because of this._trigger("stop", event); it will stop other events on the page.
Your best solution might be to just make the wrapper around the selectables larger.*
This behaviour is already happening, you just can't see it!
Simply adjust the css for your ul.selectable so that it properly contains the floated li's.
#selectable{
overflow: hidden;
}

Categories