HTML5 drag and drop with button and td

I am trying to drag a button and drop it on to a td and it does not seem to be working. The dragging is easy. But I can't seem to be able to set up the td to accept the drop. Here is the jsFiddle link

I have looked at the documentation on some excellent articles but still can't figure out what I am doing wrong.

Answers


You can use JQueryUI to implement drag-and-drop easily:

JQueryUI: Draggable & Droppable


It looks to me like a problem with the alert calls in your dragenter handler. I've updated the debug statements in your fiddle to use console.log instead of alert which seems to result in the expected behaviour in the latest version of Chrome.

console.log is a much better choice for outputting debug statements than the alert method, not least because it's far less intrusive. If you're concerned about errors in browsers which do not support the console, there's a shiv included in the HTML5 boilerplate which you should probably consider using.

In terms of cross-browser support, my advice would be to check that drag and drop is fully supported in all the browsers you hope to support. caniuse.com is an excellent resource for such a check, although you could alternatively test one of the demos you link to in each of your target browsers. If not, then you should take DaneSoul's advice and consider jQueryUI which is designed to paper over these frustrating gaps and idiosyncrasies in support for certain features.


Need Your Help

Compiling QT in windows 64 - undefined reference to

c++ qt windows-7-x64 qmake undefined-reference

Ok. I just installed Qt from: http://qt.nokia.com/downloads using the online installer. I have MinGW, make, gcc and g++ installed. I also added variables QMAKESPEC and QTDIR and also appended the

How to copy files into a zip file using ANT script?

ant ant-contrib

I want to copy few files into an existing zip file using ANT script.