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)
Related
I was trying to implement Drag and Drop in one of my project using HTML's default API. I have completed the implementation but now I am facing the issue that an extra area is also picked in the DraggedImage other than the element. I have attached the image here for reference. The area highlighted by the black pen is the extra one (the image is the element that I want to drag).
I have tried to search a lot, but didn't find any relevant resource for getting rid of this.
One method that I can think of is cloning the dragged element on drag start and deleting the cloned after drop. But I think this will not be ideal as the dragged element can be more complex.
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.
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.
This is more the theoretical type of question.
In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.
To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)
In the optimum case the mouse cursor hides while the drag operation is on.
My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.
How would i accomplish that using javascript/jQuery?
Making the cursor invisible isn't too difficult, see the top two answers on this question.
As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.
You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.
So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.
The easiest approach would probably be to just apply different CSS styles on the click event of the button.
Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.
On click the function might look like this:
$('#myButton').click(function(){
$('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
$(this).removeClass('draggable');
});
Have I understood the question correctly?