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

コメントをどうぞ