I'm writing a XUL application using JavaScript for the coding. I would like to be able to drag files onto a control in this application and, when dropped, have them show up.
This seems like it would be almost exactly like the tutorial here, but when I break in the drag and drop event handlers in a debugger, the dataTransfer member of the event isn't there!
How should I be doing this?
Thanks,
Nathan
These features were added in Firefox 3.1, and XULRunner 1.9.1, so make sure you are using the correct version. Be aware these builds are still in beta.
The old API for drag and drop is here.
Related
So I have 2 projects and a third party application for this situation:
app - The main app
gwt library - A library I built for re-usable GWT components
grapesjs - a drag n drop html editor in javascript
I created a gwt wrapper around the grapesjs library and in the gwt library playground, it works great. However, when I import this library into the main app, I am finding that dragging blocks onto the canvas does not work.
I dug into this as much as I could and found that the browser 'drag' event is not firing. To take this a step further, I went into the browser console on different websites and was able to attach drag listeners to any elements and they would fire properly. You can try it on stack even. Just inspect an element, alter to have draggable="true" and attach a listener:
$0.addEventListener($0, (event) => { console.log('drag event firing'); });
Then try to drag the element and the console logging will fire. Well, if you do the same thing in my app (any element, not just in the grapes component), it does not work. So it seems that the drag event is somehow disabled at a global level. At least, that's my best guess. My ultimate question is:
What would cause the native 'drag' event not to fire at a global level (in GWT or plain Javascript)?
I tried Chrome and FF and they both behave the same, so I don't believe it is a browser issue. I don't know what of my code would be useful for this, but I can post some stuff if asked.
I finally figured out what the issue is. To answer this question generically, you can disable all manner of drag events with this in the index.html:
<body ondragstart="return false;" ondrop="return false">
</body>
Removing these attributes let the drag event work properly again.
I have a page with SlickGrid on it and I wanted to add a FullCalendar to show date-based data in calendar form to augment the table (grid) display.
This worked fine (grid shows and calendar shows), but I noticed that I can no longer highlight and select text on the page after calling fullCalendar()
I identified root cause script as jquery.event.drag from ThreeDubMedia which is required for SlickGrid (it throws exception if jquery.event.drag lib is not loaded)
However, I'm having trouble finding a fix or even a hack to get this working without breaking other stuff (like SlickGrid functionality). I've been messing with FullCalendar options and even experimentally hacked some of the mousedown and selectstart handling code, but that didn't help. I also poked around with jquery.event.drag methods but I haven't had luck fixing the text selection issue while retaining the SlickGrid functionality that my users want (like being able to drag columns around and stuff).
So definitely some kind of integration issue but I'm not sure where the fault is.. it is weird that jquery.event.drag gives me zero problems until I actually create (render) the FullCalendar (by calling fullCalendar()), so maybe FullCalendar is to blame. It does proxy several events like mousemove, mouseup, and selectstart, but jquery.event.drag also can hijack events.. ugh.
Anybody have fix for this? Thanks.
Fiddle that shows the problem: http://jsfiddle.net/4kLf8jk5/
Clone of above Fiddle, but with call to .fullCalendar() commented out: http://jsfiddle.net/4kLf8jk5/2/
(These are minimalist examples but suffice to demonstrate the issue)
$("#calendar").fullCalendar();
$(document).unbind("dragstart");
Have you tried the 6pac repo?
This has a version of jquery.event.drag and ..drop updated for jquery version 2.x and 3.x and other small bugfixes. Might be worth a try before further investigation.
Version 3.0 of Slickgrid has recently been release that drops the jQueryUI dependency, including the drag and drop files mentioned above. This should make the drag and drop event hooks more consistent.
I'm creating an application based loosely on this example:
http://bl.ocks.org/rkirsling/5001347
I was wondering if anyone had any ideas on how to write tests for it.
Screenshot diff tools aren't the way to go as I don't want to test how the visualisation looks, but how it behaves.
Ideally what I would like to do is be able to check events.
For example, click the middle of the svg and check if a node has been created. Get the locations of two nodes, drag from one to the other and check if a link has been created.
Any thoughts on how to do this?
What you need is end-to-end testing tools. For Angular apps, Protractor is nice.
However, be careful, the native HTML5 drag-n-drop events are not well supported on Chrome, as described here: https://code.google.com/p/selenium/issues/detail?id=3604
I have recently been using sitecake, I like the drag and drop interface of it for the content editor. Try the demo on their site for the visual editor.
I am wondering how can I build a 'local' script like this for my managing and creating articles for my site.
What I need is the drag and drop options like this and a button which onClick outputs the html of the current display.
I have been looking into jQuery DND, draggable and droppable, HTML5 contentEditable and edit-inplace.
But unfortunately, nothing yet.
Can someone help me with this? Or altest point me in the right direction?
Thanks in advance.
I am the developer behind SiteCake. The first version of SiteCake was developed based on GWT and jQuery/jQueryUI Droppable and Draggable. The current version is powered by GWT and GWT-DnD library.
I am not sure I understand clearly your question about getting the html code.
Check out jQueryUI Droppable and maybe even Draggable.
Droppable is certainly capable of what you're asking. All you would need to do is specify drop points, which is what sitecake does.
Yo, I am just picking up an old project that uses dojo 1.0.2. The drag and drop function is half working and my job is to get the other half done.
The problem is I can't even begin to trace the program. There is a DnD table cell with the following attributes:
<td onclick="myclick" copyonly="true" accept="ppDay" dojotype="dojo.dnd.Source" id="src04/08/2011" class="dojoDndContainer">
I test it on the browser and it lets me drag and drop, and I see feedback on the drop destination. But the drop event is not completely implemented, which is why I am on it anyways.
The problem is I can't find where the DnD event handler is defined. Can you give me a hint?
It is implemented in dojo.dnd.Source, which can be found in dojo/dnd/ folder: Container.js, Selector.js, and Source.js.
General DnD documentation can be found in the official docs: http://dojotoolkit.org/reference-guide/dojo/dnd.html — DnD principles changed little since 1.0.2.