I want to drag and drop my widget into my div. I drag my widget over my div, but it doesnt drop the true place.
Here is my example: jsfiddle.net/Mg6V3/15
My goal is when i drop the widget on "1", widget must be drop in it.
Thank you.
It was easier than I originally thought it would be.
First of all, there is greedy option you can set when initializing droppable. It aims to stop drop events from being propagated to all droppable parent when using nested droppables.
Second of all, binding the droppable behavior to matched selectors isn't a constant process. Meaning, that when using something like $('.test').droppable() it will bind droppable only to applicable elements that already exists in the DOM. If you create new ones you're suppose to initialize droppable on them on your own.
Here's the working example based on your code. I tried to be minimize the changes - it can be done better, cleaner but it's just an illustration so I guess it's ok. http://jsfiddle.net/vM3dU/
Related
I'm using Sortable.JS for sortable drag and drop within a form builder. I want sections to be draggable (which is more or less working) and the questions within the sections to be draggable within the same section, or over into other sections.
What I'm running into is that I make the class card-text within each section tag a Sortable element, with the draggable option set to .formQuestion, which as far as I can tell from the docs should work perfectly.
However when the questions start dragging, the only place they're allowed to be dropped is within the form fields of themselves or another question.
Am I selecting the wrong thing to drag? Is there something wrong with the section.querySelector of the card-text class as targets?
https://jsfiddle.net/robertgreenstreet/y9pgqfxt/12/
Also, for some reason, it's not behaving the same on jsfiddle as on my computer, especially the ondragstart and ondragend events.
I have most of an answer finally:
I got the sorting to work within the sections by removing the Sortable assignment for each section, and instead assigning a new ondragover function to the .collapse class (this is the same element as the .card-text in the original question, the actual area that questions will be dragged within) within the sections that (very slowly) calculates whether the dragged element needs to be put above or below the child element it's being dragged over (Fiddle has been updated to reflect this).
I also assigned the existing dragEnd function to each section's ondragover event, which collapses all sections, then uncollapses the .collapse within the section that is currently being dragged over, and then that .collapse's ondragover event gets fired to allow sorting within that section.
This isn't perfect or fast, so if anyone can figure out why the nested/grouped functionality from Sortable wasn't working as expected, that part is still in the Fiddle, commented, within the loop through sections.
Or, another way to perhaps word it: can a non-Draggable element be 'disguised' as a Draggable in the eyes of a droppable?
The situation is that I'm trying to implement a workaround for the fact that jQuery Draggables and Droppables are not touch enabled. There are workarounds to this (such as Touch-Punch) but they still are emulating the touch by translating to the mouse events that a jQuery Draggable is listening for.
This is a problem for me as the particular goal I'm after is to allow a user to drag two elements with two separate drag interactions simultaneously--which one obviously can't do with a mouse--so just isn't supported by jQuery UI.
I found this as an alternative to the Draggable: https://github.com/heyman/jquery-draggable-touch
It's not nearly as robust as a default jQuery draggable, as there aren't handy parameters such as 'revert'. But not a huge deal. I can rewrite those features as needed.
However, I'd rather not rewrite all the logic that I've already built around the built-in functionality of a droppable. For example: getting the dropped item from within the droppable configuration via ui.droppable--or just trying to figure out if it there was even an element dropped upon it.
Is there a way for an element to be 'seen' as a jQuery draggable by a jQuery droppable without actually being a jQuery draggable?
UPDATE:
I've discovered I can use this draggable-touch AND jQuery's draggable at the same time...draggable for mouse, draggable-touch for touch. Nice.
However, I still have to integrate the touch event into the fold and to do that, ideally, I could manually calculate the position of the dragged item and if it is above a droppable element, I could .trigger the drop event. Alas, I can't find the correct syntax for triggering a drop event on a droppable.
I am working on a drag and drop project.
How: I am using the HTML5 drag events.
Code: See fiddle here
Problem: It only works sometimes, and I checked the code a million times
Idea:
- Get element and drag it over a div with id: LayerN (N=number)
- Create a new layer before LayerN when dropping
- AppendChild to new Layer.
- Remove empty layers if there are any.
Is there anything I am doing wrong or too complex? I don't want to use a JQuery framework, i want to understand what I am doing. Thanks a lot for reading, any help will be highly appreciated.
I can't get your fiddle to work so I'm giving general comments rather than a full 'answer' so hope it helps!
For D&D I find what works best is attach a mousedown event to the document on page load (or the containing element of the draggable objects if that's more appropriate).
Don't attach any events to the draggable elements themselves at this stage.
On mousedown, check the classname/id of the target and if it's draggable:
If you want to show it dragging, clone the element and append to a position:fixed or :absolute DIV - you can move this on mousemove relative to the cursor. Keeping this element offset to the cursor means you can still detect what's under the cursor.
Hide the element you're dragging. You can put some sort of image showing where it came from at this stage if you wish using insertBefore.
I hide the element rather than move it because if you cancel the drag it's very easy to restore it.
Attach mousemove and mouseup events to the window or document. The function you call on mousemove can, based upon the event.target/event.srcElement, decide whether the dragged object can be dropped or not (again, I generally look for a className here).
This way you've only got a maximum of two event listeners running everything rather than multiple events on every single element. I suspect your event listeners may be tripping over each other.
I don't know if that gets you any further, but good luck!
Here's a basic example of what I have going on here:
http://jsfiddle.net/kgqkM/2/
What I'm trying to do is dedicate the area outside of this list to be a "delete" area where I can set up the appropriate logic to remove the dragged element from the page. I'm attempting to show when the user drags the element off the list it would color the outside red/ semi-transparent. When I set events on the outer-wrapper, they seem to take over all the dragenter/ dragleave events.
Guessing my issue has to do something with setting the event on the parent div? I'm starting to try and perhaps have one master event on top and deciding what to do based on the e.target and .parents('.switch'), but insofar it's resulting in buggy behavior.
It would seem that I had to do some (correct) logic on the event target. I have to refactor my code a bit, but it's working out.
In a web application I am making I want to create the same effect that GMail has for dragging and dropping labels and conversations.
Basically I want to be able to make an ondrag function that attaches a "new" html element to the cursor, and upon releasing it over certain elements I want to execute my given functionality that is aware of both the dragged element and the element over which the drop occured.
I don't want to move any elements around. I want to make a function that let's the original elements stay in place and only react to the dragging of some new element.
How can this be done?
you mean something like this : http://www.finrik.at/temp/drag_drop/index.html
here is the how to. and you'll need jQuery plgin (www.jquery.com)