JavaScript + Ajax 実践サンプル集

Draggable + Sortable

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのdraggable()プラグインを利用してアイテムリストに新規アイテムをドラッグして挿入します。「Drag me down」をドラッグしてItem1-5上に移動すると空白行が挿入されますのでドロップします。すると、ドラッグした新規アイテムが空白行に挿入されます。

このサンプルを編集して試してみる

$('#draggable').draggable({
  connectToSortable: '#sortable',
  helper: 'clone',
  revert: 'invalid'
})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Draggable + Sortable</title>  
<link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
<link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }
</style>
  
<script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jQuery/UI/ui.core.js" type="text/javascript"></script>
<script src="jQuery/UI/ui.draggable.js" type="text/javascript"></script>
<script src="jQuery/UI/ui.sortable.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $('#sortable').sortable({
      revert: true
    });
    $('#draggable').draggable({
      connectToSortable: '#sortable',
      helper: 'clone',
      revert: 'invalid'
    })
    $('ul, li').disableSelection();
  });
</script>  
</head>
<body>

</div>

<br />

</body>
</html>