ページ内のデータを移動出来るようにしてみました。
ショッピングサイト等で使うと良いかもしれません。
サンプルとスクリプト
Htmlの記述
draggable=”true” でドラッグを可能にします
<div id="boxs" ondragover="DragOver(event)" ondrop="onDrop(event)"> <span id="box1" class="ao" draggable="true" ondragstart="DragStart(event)">青</span> <span id="box2" class="ak" draggable="true" ondragstart="DragStart(event)">赤</span> <span id="box3" class="md" draggable="true" ondragstart="DragStart(event)">緑</span> </div> </div> <div id="dropbox" ondragover="DragOver(event)" ondrop="onDrop(event)"> </div>
JavaScriptsの記述
<script>
/* ドラッグ開始時の処理 */
function DragStart(event){
event.dataTransfer.setData("text", event.target.id);
}
/*ドロップ時の処理 */
function onDrop(event){
var id = event.dataTransfer.getData("text");
var drag =document.getElementById(id);
event.currentTarget.appendChild(drag);
event.preventDefault();
}
/* ブラウザ標準のドロップ動作をキャンセル */
function DragOver(event){
event.preventDefault();
}
</script>
Chrome・Safariの場合は、CSSに以下の指定を追加
ドロップ先の要素 { -khtml-user-drag: element; }
テーブルでも出来ます。