I have sliders on my site that allow the user to select via dragging, or clicking on an item. When they drag, the item closest to the vertical center of the parent is chosen.
CodePen Demo
The problem is that the Knockout click binding is being bound before the jQuery UI draggable option (implemented in a custom binding).
To reproduce, try clicking and dragging on the bottom number, and move it up a little (but not in the center). Try doing that a few times, as it seems to work correctly on the first drag... sometimes.
The binding basically calls .draggable, and updates an observable when dragging stops.
The HTML is set up like this.
<ul data-bind="slideSelect: thing, foreach: nums">
<li data-bind="click: $root.thing.set($data), text: $data">1</li>
</ul>
Is there any way to make the draggable element stop the lis click events from firing? I'd like to do it in the cleanest fashion possible.
did you try event.preventDefault(); in on drag event handler? the idea is if you detect drag event then stop the event bubbling. if click happens before drag then i think you might have to wait to see if drag happens then complete the action.
Related
I have a div with an attached movable element. Inside the div there is a list of buttons that is accompanied by a scroll bar. When I try to drag the scroll bar it simply drag the whole div around my screen. In this code fragment I am trying to get the moveable to turn off when I click on the scroll bar (which is part of metL).
I have the "metId" which is everywhere else in the div set to resume dragging the div around.
The pause and resume do not work.
Any help resolving the issue would be helpful, thank you.
It is quite difficult to answer the question, without seeing the html markup comprising the structure of all relevant elements. There may even be a better approach to do what you are trying to accomplish. Nevertheless, I'm pointing out one possible issue:
The drag and drop action starts, when dojo registers the dragstart, mousedown, or selectstart events on the drag handle. In your case the drag handle is the div with id "divMenu"+threadId. All of these events are triggered before the click event occurs, so pausing the moveBlocker has no effect.
In addition I think, your moveBlocker event should not be an empty function. Instead it should actively 'block' the relevant events from being propagated to the drag handle:
var moveBlocker = on.pausable(dnd.handle, "mousedown,dragstart,selectstart", function(e) {
e.stopPropagation();
e.preventDefault();
});
Depending on the behavior you are trying to accomplish, the other event handlers should also be registered on the "mousedown" event.
I'm making a little webapp for the iPad as a personal project. It has two iScroll (http://cubiq.org/iscroll-4) scrollers and a lists of divs inside it.
I initially used a single ontouchstart listener to select the rows but that would select the row even when swiping to scroll. So later I added in ontouchmove (sets a flag to stop event firing in ontouchend) and ontouchend. But I still have to outstanding issues:
Tapping to stop the momentum scrolling will select the row,
Implementing 'fastClick' (https://github.com/alexblack/google-fastbutton) on the row element inside the scroller disables the scrolling.
Any help on where to look to implement/fix these would be great.
Thanks in advance.
EDIT: I'm also trying to figure out how to stop fastClick from triggering the event when a touchstart event is triggered before touchmove. This means that the event fires even though the final touch coords where way outside the area of the 'button'.
I'm trying to build a little calendar app sort of like Google Calendar. I'm trying to create events with a click and drag functionality so that the events align to a grid. I'm trying to
tie the dragging to TD elements below the event DIV element, which works when moving downwards (lengthening the event), but it doesn't work moving upwards (shrinking the event).
What occurs is that the mouseenter event is fired for the event DIV element, but it is never fired for the underlying TD. If you try to resize the DIV by moving upwards on the side, it works because the TDs actually receive the mouseenter event.
Google Calendar and jQuery Week Calendar use the mousemove event, but the mousemove event is fired for every pixel, which seems a waste. Is there a way to write this without using the mousemove event?
Is it possible to put the DIV element behind the table and the TDs? If the table is somewhat transparent, the user would still be able to see the DIV, but would actually be firing events on the TDs. I tried to do this with z-index, but it didn't seem to actually work.
jsFiddle example code: http://jsfiddle.net/rockymeza/8SHpA/
It sounds like you're having a similar kind of issue that I had:
you want to fire event behind an element? The answer is CSS. Set pointer-events:none; to the parent.
I had made a test where I tried to (unsuccessfully) implement the same behavior on touch devices. You can check that at: http://www.hakoniemi.net/misc/pointer-events.html if it'd help you with your issue.
I have a div, with an onMouseUp event set (in HTML).
Within that div are many elements, some of which contain icons for handles that I want to drag.
The icons have an onMouseDown event.
When I drop the mouse on an icon and release it, first the icon's onMouseDown event fires, then the div's onMouseUp event fires - exactly as I would expect.
However when I click down on the icon, drag it to another part of the div, and release, the mouseDown event is fired as you would expect, and the onmouseUp event is NOT fired.
I have two questions.
1) Why is this the behaviour?
2) What is the correct way to handle drag-drop in a browser independant way?
I am using firefox 3.6.16 on widows, but IE 8 behaves the same way.
I know this doesn't seem like it's a fair answer, but the best answer (in my opinion) is to use something like jQuery and use draggable. I've only worked with Dojo and jQuery but both have an easy to use drag/drop interface that is browser independent.
Here's a url explaining jQuery's.
http://jqueryui.com/demos/draggable/
I'm just wrestling with this today. There is a nice demo at http://www.brainjar.com/dhtml/drag/demo.html that uses raw Javascript (with all the browser checks that that implies). It looks like the key is to stop event propagation on the mousedown event.
I'm working with Dojo, and using dojo.stopEvent in the dragStart (that is, the function attached to mousedown) made the difference in my seeing the mouseup.
I'm trying to implement a drag and drop script and have hit the wall with one problem. When you take an item and start dragging it - the item is directly below your cursor and onmouseover event is very rarely fired on the items below. But i want other items to highlight when i drag something over them. One of the solutions would be not to drag anything at all - that way the mouse events would work, but that would look ugly. Has anyone ever done something like this and know how to overcome this problem?
If you're thinking about suggesting some JQuery plugin or something like that - please don't. I don't need a completed solution, this is educational.
IMO, in order to have the mouseover event to be fired up frequently would be binding the mouseover event to the parent element of all the affected elements, or perhaps to the document itself, since events get bubbled up, they are probably the only elements that can fire the mouseover events.
Then further, write a hit method in your mouseover event and actively check the position of your mouse cursor, see whether it's going under the target element's boundary. Tradeoff in usability and performance. You choose.
My 2cents.
Or perhaps, you can reverse engineer jQuery UI to see how they implement the drag element. Haven't check thou, but I think there should be a wiser way.