jQuery 、jQuery UI の Draggableプラグイン を使用して、ボックスをマウスで移動させます。
対象プラグインを、下記より入手してください。
* jQuery
* jQuery UI
サンプル
サンプルソース
JavaScript + CSS
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.core.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.draggable.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/css/black-tie/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript">
<!--
$(function() {
$("#draggable").draggable({ opacity: 0.5, cursor: 'move' });
});
//-->
</script>
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; cursor: move; }
</style>
HTML
<div id="draggable" class="ui-widget-content"> <p>ドラッグしてください</p> </div>
カテゴリ: JavaScript
2010/04/20 1:57

