Skip to content

Instantly share code, notes, and snippets.

@jocoonopa

jocoonopa/dragAndDrop.html

Last active December 28, 2015 15:39
Show Gist options
  • Save jocoonopa/7523621 to your computer and use it in GitHub Desktop.
Save jocoonopa/7523621 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dragAndDrop.html
<!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