A simple front-end project using HTML5's Drag and Drop APIs.
It makes users be able to design or simulate view files of Web projects based on the mouse interaction.
Web: https://dragonit-demo.herokuapp.com/
Video: https://youtu.be/33aFSZ3yvTE
http://arkainoh.blogspot.kr/2016/09/dragonit.html
(I recommend you to apply the latest version of Bootstrap and jQuery. Bootstrap is not mandatory, but at least you have to define the style of 'active' class using css)
Get bootstrap: http://getbootstrap.com/getting-started/
Get jQuery: http://jquery.com/download/ or include <script src="//code.jquery.com/jquery.min.js"></script> in your code.
Download 'dragonit.js' and include it in your project.
On your view file (HTML based), Attach a <div> tag with 'dragonit' class at the beginning of the <body> tag: <div class='dragonit'></div>
Then, paste <script src="dragonit.js"></script> at the end of the <body> tag.
For example,
<body>
<div class="dragonit"></div>
Your code here...
<script src="dragonit.js"></script>
</body>
Now, you need to add event controllers on your page. It can be done simply by adding 3 buttons with class name 'dragonit_select', 'dragonit_move', 'dragonit_delete'.
For example,
<button type="button" class="dragonit_select">select</button>
<button type="button" class="dragonit_move">move</button>
<button type="button" class="dragonit_delete">delete</button>
You are ready to use dragonit!
Attach <%= javascript_include_tag "dragonit" %> instead of <script src="dragonit.js"></script>.
Add Rails.application.config.assets.precompile += %w( dragonit.js ) to /config/initializers/assets.rb
- c9.io
- HTML5
- Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.19
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
https://developer.mozilla.org/en-US/docs/Web/API/Event
http://m.mkexdev.net/87
http://sergeswin.com/1032