<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="./external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background: #ccc;
margin-bottom: 20px;
}
.target {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="target">target</div>
<script>
$(function(){
$('.box').draggable();
$('.target').droppable({
accept: '.box',
drop: function(event, ui){
console.log('dropped!');
}
});
});
</script>
</body>
</html>
ui追加
$(function(){
$('.box').draggable({
helper: 'clone'
});
$('.target').droppable({
accept: '.box',
hoverClass: 'hover',
tolerance: 'fit',
drop: function(event, ui){
ui.draggable.clone().appendTo(this);
console.log('dropped!');
}
});
});
