jQuery UIを使用ã—ã¦ã€ãƒ‰ãƒ©ãƒƒã‚°&ドãƒãƒƒãƒ—ã‚’è¡Œã„ã¾ã™ã€‚
è¦ç´ ã®ç§»å‹•ã‚„コピーをGUIæ“作ã§è¡Œã†ã¨ããªã©ã«å½¹ç«‹ã¡ã¾ã™ã€‚
ã¾ãšã¯ã€
ã“ã¡ã‚‰ã‹ã‚‰jQueryをダウンãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚
次ã«ã€
ã“ã¡ã‚‰ã‹ã‚‰jQueryUIをダウンãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚
ダウンãƒãƒ¼ãƒ‰ã—ãŸãƒ•ã‚¡ã‚¤ãƒ«ã‚’HTMLã§èªã¿è¾¼ã‚€ãŸã‚ã€ä»¥ä¸‹ã®ã‚ˆã†ã«æŒ‡å®šã—ã¾ã™ã€‚
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
以上ã§æº–å‚™ã¯å®Œäº†ã§ã™ã€‚
HTML例
<div class="drag" id="1">ドラッグ元</div>
<div class="drop" id="2">ドãƒãƒƒãƒ—先1</div>
<div class="drop" id="3">ドãƒãƒƒãƒ—先2</div>
JavaScript例
var myDragAndDrop = function() {
var drag_id = null;
var drag_onclick = null;
$(".drag").draggable({
zIndex: 9999,
distance: 10,
helper: 'clone',
snap: true,
start: function(event, ui) {
drag_id = $(this).attr('id');
},
stop: function(event, ui) {
}
});
$( ".drop" ).droppable({
accept: ".drag",
over: function( event, ui ) {
$( this ).addClass( "over" );
},
out: function( event, ui ) {
$( this ).removeClass( "over" );
},
drop: function( event, ui ) {
$( this ).removeClass( "over" );
var drop_id = $(this).attr('id');
// drag_id,drop_idã§ãƒ‰ãƒ©ãƒƒã‚°å…ƒã€ãƒ‰ãƒãƒƒãƒ—先を判定ã—ã¦å‡¦ç†ã™ã‚‹
}
});
}
$(function(){
myDragAndDrop();
});