Drag and Drop example in HTML5

HTML5 has made dragging and dropping objects from one place to another very easy.

We will see an example of the HTML5 API’s that can be used to drag and drop objects

1. How to make the object draggable
• For making object draggable, we need to first set the draggable attribute of that object to true.
• Then use the onDragStart method to capture the data that needs to be dragged
2. How to make the object Droppable
• We use 3 methods that will be used to define a object is droppable
• onDrop
• onDragEnter
• onDragOver

Please see the sample code

Output

Author -

I am Ketan and have a blog KSCodes that is developed to share some of the common examples that we come across in web development. You can get examples on java tutorials and spring tutorials.

Have you ever wish to learn about AngularJS framework for java web development?

Though online article directories and blogs of Java web development professionals are feed with distinct stories and articles about different products; still you can consider this post to learn every important fact about AngularJS. The author will explain the framework, its features, architecture, and the steps to build an AngularJS application. Read every point thoroughly to get a clear vision about the framework.

AngularJS is an open source javascript framework for web application. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It can be added to an HTML page with a <script> tag.

Definition of AngularJS:

AngularJS is a structural dynamic web apps framework. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data compulsory and dependency injection eliminate much of the code you generally have to write. And it all occurs within the browser, making it an excellent partner with any server technology.

Features of AngularJs:

• AngularJS is a powerful JavaScript based web development framework which is useful to develop powerful web application.
• AngularJS provides developers options to write client side application in a clean MVC architecture.
• Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code for each browser.
• AngularJS is open source, completely free, and used by thousands of developers around the world.

Overall, AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain.

AngularJs is divided in three major parts which are called ng-directives. Those are listed below.

1. ng-app - This directive defines and links an AngularJS application to HTML.
2. ng-model - This directive binds the values of AngularJS application data to HTML input controls.
3. ng-bind - This directive binds the AngularJS Application data to HTML tags.