Gridster.js: Prevent dragging on clickable element - javascript

I am using Gridster in a project. My scenario is:
I have a series of blocks in a gridster grid, and the problem I am facing, is that I don't want all of the blocks to be draggable. I have tried setting the ignore_dragging callback, and I have successfully stopped those blocks from being draggable, but I cannot use this as it also prevents normally click events from getting through.
I also tried doing event.preventDefault() in the start and drag event callbacks, but that proved ineffective.
Is there another way of cancelling dragging on some blocks, but allowing click events to pass?
Thanks in very much.

Related

Change event color if overlaps happens while dragging in fullCalendar

I am building a calendar like this one fullcalendar external dragging. What I want to achieve sounds easy, but I found is not. I need, while dragging one of the external events to one specific day in day view, that if overlapping is detected the event changes its color immediately, but color must switch back if overlapping is no longer detected. I thought that in the drop callback(not dropEvent callback) I could be able to make some sort of comparisson, but looks like if the drop listener were outside of the scope of the calendar because I cant access to the ObjectEvent, or at least I dont know how.
In essence, change the color while dragging an external event into the calendar if, for instance, overlapping is detected
I think this is a weird requirement. Ideally, the color should be customizable per event.
However, I would suggest something that validates your event. Basically, save the original state of the event object. Trigger a validation when it hovers over a zone. Revert back when you leave the zone.
I'm not exactly sure you to see the list of events already in the day.
It's not a great solution but it should work.
I found it. There is an event which handles it in fullCalendar: EventReceive.
Basically it is called after drop() and is the one that builds the calendar'event object right after the drop event ends.
So, if you are dragging an external eventObject to the calendar and you need, for instance, checking overlapping for this external object, this is the man, I mean, the event.

javascript how to determine what is cancelling an event

I have jquery, bootstrap included in a page I'm writing. It's a complex page. The problem I'm having is with Internet Explorer not seeing mousedown event. Chrome and FF both see the event just fine but not IE.
I wrote a test page with the event and it worked just fine in IE. So my question is...
Is there a way through the developer tools to determine what is cancelling an event?
I have a suspicion that one of the many .js files I've included is cancelling the mousedown event and IE isn't seeing it anymore. Chrome and FF does though. So I'm not 100% that it's being cancelled but it's my only guess I can come up with.
Code is really irrelevant since it's all of jquery and bootstrap. However, I am playing with divs that are draggable and resizeable. That's why I need to use jquery. The bootstrap is used because I also have a wysiwyg editor on the page.
Please don't recommend click. I need mousedown. When the mouse is down the border around the draggable and resizeable div turns red and I have some code that selects that div to capture top, left, width, and height as it's being moved and resized.
If click was selected as the event, the user would have to click the div box first then click and hold to move it. That's not a user friendly interface.
Any help is greatly appreciated.
What do you exactly mean as cancel, .preventDefault() or .stopPropagation? If we are talking about preventDefault - you should still be able to add event listener to parent container and then see your event object - it might have some data to traceback. Alternative would to override jQuery .on method and see who actually subscribes to the event.
After little more thinking - add another listener BEFORE the malicious one, to do that insert document-ready handler with event binding right after jquery loading code. In your new mousedown handler try to override problematic method of the event.
UPDATE:
you should try to check all events attached to your element one by one. To do that - check this post jQuery find events handlers registered with an object
In short - try using jQuery._data( elem, "events" ); to see attached event listeners and inspect their code in your code base. After you find the reason it will be much easier to reach the desired functionality. Before that it is just a guesswork.

Jquery lock statement or equivalent?

I'm using jQuery tooltips (tipsy plugin) to show validaton errors on my site. At the request of the client, I've modified the plugin to allow showing the tooltips on hover AND focus. However, when clicking a field with the mouse (rather than simply tabbing to it), both event handlers execute and there is a flicker on the tooltip because of both attempts to show it. What's the cleanest way to prevent multiple event handlers from executing in a scenario like this?

Function Sortables (Mootools library)

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.

Focus and blur events for HTMLDivElement?

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.

Categories