Drag and drop is a very common feature. In which you drag an element and drop it somewhere else. Drag and drop is a standard feature in HTML5, You can make any element draggable. Below are the steps on how to achieve the same.
Below is a demo of the same (drag div1 to div2).
First step: Make the elements draggable we want to drag
Second step: Save the id of dragged element
event.dataTransfer will be available in whole drag and drop event, so it can be used to keep dragged target id.
drag function can be called by attribute
ondragstart, which will call drag function passing event as a argument.
Third step: Allow element to be dropped in other element
By default elemets can’t be dropped in other element, so to prevent this default behaviour
call allowDrop function by attribute
Fourth Step: Swap elements on dropping the element
ondrop attribute is fired on which a element is dropped, call drop function by
In drop function swap drag_target with drop_target to achieve desired result.
drop function code explanation:
event.preventDefault()is to prevent default functionality of drop which is to open dropped element as a link.
event.targetget element on which drop is made.
ev.dataTransfer.getData('target_id')get id of dragged element from dataTransfer and by id get element.
document.createElement('span')make dummy span which will help in swapping the elements.
drop_target.before(tmp)append dummy span before drop_target in dom.
drag_target.before(drop_target)append drop_target before drag_target in dom.
tmp.replaceWith(drag_target)it will replace dummy span with drag_target.
code for swaping elements may seem over-conscious for two div’s,
But when there are more than two div’s this is the best way to keep track of element’s position.
- Make sure your application has jquery loaded.
To load jquery add
- I have made a typo mistake so that you don’t just copy paste but instead understand the code.
- 22 Dec 2017 Highlight link in side menu on scrolling to the part of the page to which that link belongs
- 22 Dec 2017 How to create sticky left sidebar which sticks on scrolling
- 22 Dec 2017 Adding vertical parallax effect and overlay on banner image
- 22 Dec 2017 Clean way to handle scroll events in emberjs app without blocking task queue and runtime
- 19 Dec 2017 What is the meaning and use of left shift operator
- 19 Dec 2017 Everything you need to learn about mobile first design starting from what is mobile first
- 11 Dec 2017 Emberjs achieve two way binding with native input tag and discard input helper
- 11 Dec 2017 Ember js concatenate all third party js files present under vendor folder to vendor js
- 10 Dec 2017 Stakeholders agree to the requirement and then later on says this does not serve my purpose
- 10 Dec 2017 Sheet comparison of frontend js frameworks
- 11 Nov 2017 Why is it so hard to develop good software
- 04 Sep 2017 Is Graphql here to replace REST Api
- 05 Jun 2017 My awesome list of english songs
- 29 May 2017 Troll software intern
- 17 May 2017 What is icon font and why use it over png.
- 16 May 2017 Philosophical difference between ruby and python.
- 15 May 2017 Given an array, find number of subsets with k elements, where absolute difference between the maximum and mininmum element is at most x
- 15 May 2017 Automated testing of google autocomplete using cucumber and capybara
- 15 May 2017 How to manage assets in rails, difference between app, vendor and lib assets, what is asset pipeline?
- 15 May 2017 Swap elements in dom by drag and drop.
- 15 May 2017 What are the options with which protect_with_forgery is called?
- 15 May 2017 How to add csrf in ember app.
- 15 May 2017 Sessions and csrf in rails.
- 15 May 2017 Best practices while using ooor gem for making rpc calls to odoo(openerp) from ruby framework
- 09 May 2017 Integrate paytm payment with rails app
- 08 May 2017 Automated deployment on github pages using jekyll themes.
- 01 May 2017 How to add inline image in gmail.
- 01 May 2017 Undefined method `user_confirmation_path' error with devise rails.