I am using the angular2-draggable library in an Angular 14 project:
"angular2-draggable": "^2.3.2"
When I have a normal draggable element, like this:
<span draggable="true"> Normal Draggable</span>
I can drag it over another element that listens for dragover and drop events, like this:
<div (drop)="drop($event)" (dragover)="allowDrop($event)">Drop Area</div>
When I drop the normal draggable on the Drop Area, the dragover and drop events fire as expected.
However, when I have an element marked with "ngDraggable", like this:
<span ngDraggable >ngDraggable</span>
and I try to do the same thing, neither the dragover nor the drop events fire.
The angular2-draggable library is working great for multiple things I'm doing, but I need to know when an element is dropped on another.
Does anyone know whether/how this can be done?
Thanks much in advance.
Related
In an effort to add favoriting to a application menu, I'm working on getting onMouseEnter events to fire only on the element that is currently hovered. The problem is that due to these items being nested, onMouseEnter will fire on both the child element and the onMouseEnter of the parent element will also fire.
Ie:
HTML Nesting
The ideal behavior would be this:
Ideal Behavior
But the actual behavior is this:
Actual Behavior
I have already tried stopPropogation, but the problem is that there is a separate event listener on each of the menu items (both the L1 and the L2 have their own on mouse enter listeners). As such, capturing the event at the L2 level doesn't stop the event from firing at the L1 level.
Does anyone know of a way to only trigger the L2 event? Ideally, we wanted to be able to keep hover state specific to each item (ie don't have to have pass handlers for "setIsChildElementHovered"), but open to any ideas people have.
Did you try to add the event only on the child element ? If you have some snippets code might to answer your question. thanks :)
I know that using the template syntax I could use the standard angular 2 (mouseover) event listener to listen for a mouse over event for a specific column. I was wondering if there is a way to listen for mouseover events for an entire row and be able to get the index for that row.
I am trying to a achieve an mouse over hover action the triggers on one row at a time, without having to use multiple <template> tags on each column.
Any help is much appreciated. If there is a better approach then I am all ears.
It is possible to handle the row mouse events from within the 'consuming' component. You should check following GH issue for a runnable sample of such approach: https://github.com/telerik/kendo-angular2/issues/21#issuecomment-247941402
I have an element (a div) that has a number of javascript touch and mouse handlers on it. Apparently, this means the element is 'clickable', and it seems you are not able to select text on clickable elements on the iPad.
Is there any way around this? The event handlers are necessary for this to work right, but I'd also like users to be able to select and copy the text.
One solution is to make the div contenteditable=true. The event handlers still work, and I'm able to long-press to bring up the selector. But this would create its own set of problems and I'd like to avoid contenteditable if I can.
After some tinkering, I've found a workaround solution: Put the mouse and click handlers on the window instead of the element. Then, check the event target in the handler to see if the element of interest is what was clicked.
Not ideal, but it seems to work. I'm able to long-press and create a selection on an iPad.
I have a problem while using the Sortables() function (Mootools library).
this.sort=new Sortables(this.box,{
onStart: function(el){el.setStyles({'background':'#f0f0f0','opacity':1});},
onComplete: function(el){el.setStyle('background','none');this.setEditor();}.bind(this)
});
In fact, I have a DIV, which contains other DIV blocks which should be made sortable. And the 2nd level DIVs have SELECT tags inside.
The problem is these dropdown list does not drop when clicked. The click just falls to the parent DIV element and onStart functions starts. How can this problem be solved?
The prototype: http://jsfiddle.net/uCM2R/3/
mootools 1.12? heh.
right. so basically you want a click on the dropdown not to trigger the sort? this will be tricky as it uses a delegated event on the parent and it bubbles. also, scripting click events on a select is not reliable either so you cant stop the click event from propagating reliably - at least in 1.12. 1.3.2 is fine.
consider using the handles: "div.foo" option on the select whereby thats a child div that allows them to move things as opposed to the whole div.
http://jsfiddle.net/dimitar/uCM2R/4/
obviously in the div.foo handle you can put some icons that indicate moving. only they will act as the drag point for sorting, thus enabling you to work with selects w/o interference.
here it is in 1.3.2 as per your original spec/markup: http://jsfiddle.net/dimitar/uCM2R/6/
added a click handler for selects that stops the bubbling.
I implemented a custom drop down with HTML, CSS and JavaScript. It works well now, but I am not happy with the way I am doing "blurring" right now. When you open the list, and then click somewhere else, it should collapse. What I did was that I added an event listener (mousedown) to the window after expanding the list, and removing the listener after collapsing. The event basically checks whether the DOM event happened on the right element using target and if not, then blur the drop down control.
I know about focus and blur. However, they only seem to work on form elements, which I find quite understandable. They also support other scenarios like when "tabbing" away.
Anyway, I am asking you if there is a better way of doing what I am doing right now. What I do just feels stupid.
Maybe you could have a dummy input and focus that when the control is active. Then watch the blur and close the list. It would not be able to be display:none but maybe opacity:0, or just out-of-view.
What I do is use mouseout to close my custom lists. I create a bounding box around my drop down. That box has the onmouseout event attached to it that closes the drop down when the mouse moves outside of it. This way you can have a little padding outside your list that would give your users a little better functionality then just mouseout on your basic list.
If you want to do it using click events, I would have a global function, like it seems you have setup, and call that function on any click events on the page.