Last active
December 28, 2015 15:39
-
-
Save jocoonopa/7523621 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="zh-tw"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>透過拖放實現新增 , 刪除 </title> | |
| <script src="//code.jquery.com/jquery-1.9.1.js"></script> | |
| </head> | |
| <body> | |
| <div style="width: 600px ;border:1px solid #000"> | |
| <h2>可將喜歡的項目拖入收藏夾</h2> | |
| <div class="source" draggable="true" >戰場原黑儀</div> | |
| <div class="source" draggable="true" >八九寺真宵</div> | |
| <div class="source" draggable="true" >神原駿河</div> | |
| <div class="source" draggable="true" >千石撫子</div> | |
| <div class="source" draggable="true" >羽川翼</div> | |
| </div> | |
| <div id="dest" style="width: 400px; height:400px;border:1px solid #000;float: left;"> | |
| <h2>收藏夾</h2> | |
| </div> | |
| <img id="gb" draggable="false" src="gb.jpeg" alt="刪除" style="float:left;" /> | |
| </body> | |
| <script> | |
| $(function () { | |
| var dragDropApp = (function () { | |
| var controller = { | |
| onDrag: function () { | |
| view.$drag.on( 'dragstart', function ( evt ) { | |
| evt.originalEvent.dataTransfer.setData( 'text/plain', '<item>' + $( this ).html() ); | |
| }); | |
| return this; | |
| }, | |
| onDropDest: function () { | |
| view.$dest.on( 'drop', function ( evt ) { | |
| var sText = evt.originalEvent.dataTransfer.getData( 'text/plain' ); | |
| if ( (sText.indexOf( '<item>' ) == 0) ) { | |
| var $newEle = $( '<div></div>' ); | |
| $newEle.attr( 'id', new Date().getUTCMilliseconds() ) | |
| .html( sText.substring( 6 ) ) | |
| .prop( 'draggable', true) | |
| .on( 'dragstart', function ( evt ) { | |
| evt.originalEvent.dataTransfer.setData( 'text/plain', '<remove>' + $newEle.attr( 'id' ) ) | |
| }); | |
| $( this ).append( $newEle ); | |
| } | |
| }); | |
| return this; | |
| }, | |
| onDropGb: function () { | |
| view.$gb.on( 'drop', function ( evt ) { | |
| if ( (evt.originalEvent.dataTransfer.getData( 'text/plain' ).indexOf( '<remove>' ) == 0) ) { | |
| var id = '#' + ( evt.originalEvent.dataTransfer.getData( 'text/plain' ).substring( 8 ) ); | |
| view.$dest.find( id ).remove(); | |
| } else { | |
| return false; | |
| } | |
| }); | |
| return this; | |
| }, | |
| preventDocumentDefault: function () { | |
| $( document ).on( 'dragover', function () { | |
| return false; | |
| }) | |
| .on( 'drop', function () { | |
| return false; | |
| }); | |
| return this; | |
| } | |
| }, | |
| view = { | |
| setup: function ( $ele ) { | |
| this.$ele = $ele; | |
| this.$dest = this.$ele.find( '#dest' ); | |
| this.$drag = this.$ele.find( '.source' ); | |
| this.$gb = this.$ele.find( '#gb' ); | |
| } | |
| }; | |
| return { | |
| init: function () { | |
| view.setup(); | |
| controller.onDrag().onDropDest().onDropGb().preventDocumentDefault(); | |
| } | |
| }; | |
| }); | |
| dragDropApp().init(); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment