jqDnR

Drag-Drop, Resize の簡素な実装

ドラッグ-ドロップ
右下の■でリサイズ

ドラッグで移動可能
Yuri Nakamura Yuri Nakamura

↑ドラッグ用のバーを表示
透過度の変化、
I am an example Box "#ex3"
Using the Handles, you can *RESIZE* and *DRAG* me. 
<script type="text/javascript"> 
$(function() {
    $('#ex1').jqResize('.jqResize').jqDrag();
    $('#ex2').css('opacity',0.6).jqDrag('.jqDrag').jqResize('.jqResize');
    $('img:eq(0)').jqDrag();
    $('img:eq(1)').jqDrag();
});
</script>


<div id="ex1" class="jqDnR">
    ドラッグ-ドロップ<br />右下の■でリサイズ
    <span class="jqHandle jqResize"></span>
</div>

<p>ドラッグで移動可能<br />
<img src="yn.jpg" class="jqDnR"  />
<img src="yn2.jpg" class="jqDnR" />
</p>

<div id="ex2" class="jqDnR">
    <div class="jqHandle jqDrag"></div>
    透過度の変化、 ドラッグ用のバーを表示<br />
    <div class="jqHandle jqResize"></div>
</div>