ドラッグアンドドロップ

ビューをドラッグアンドドロップできるようにするには、<dragstate>タグを使います。

• ドラッグ：マウスボタンを押したとき(onmousedown)・・・apply()
• ドロップ：マウスボタンを離したとき(onmouseup)・・・remove()

赤四角をドラッグアンドドロップできます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee" width="500"> 
   <view width="50" height="50" bgcolor="0xff0000"
         onmousedown="this.dr.apply()"
         onmouseup="this.dr.remove()">
      <dragstate name="dr"/>
   </view>
</canvas>

<dragstate>の属性、drag_min_x、drag_max_x、drag_min_y、drag_max_yを使って、ドラッグ可能な範囲(ｘ、ｙの最小値と最大値)を指定できます。

サンプルでは、赤四角をドラッグしても青の背景から飛び出しません。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee" width="500"> 
  <view bgcolor="blue" align="center" valign="middle" width="400" height="200">
     <view bgcolor="red" width="50" height="50" 
          onmousedown="this.dr.apply()"
          onmouseup="this.dr.remove()">
       <dragstate name="dr" 
           drag_min_x="0" 
           drag_max_x="$once{parent.width - this.width}" 
           drag_min_y="0" 
           drag_max_y="$once{parent.height - this.height}"/>
     </view>
  </view>
</canvas>

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <class name="sq"
      onmousedown="this.dr.apply();this.doDrop();this.bringToFront();"
      onmouseup="this.dr.remove();this.noDrop()">
    <dragstate name="dr"/>
    <view width="50" height="50" bgcolor="${parent.bgcolor}"/>
    <method name="doDrop">
      var filter = new flash.filters.DropShadowFilter();
      var mc = this.getMCRef();
      mc.filters = new Array(filter);
    </method>
    <method name="noDrop">
      var mc = this.getMCRef();
      mc.filters = new Array();
    </method>
  </class>
 
  <sq bgcolor="red"/>
  <sq x="60" bgcolor="yellow"/>
  <sq x="120" bgcolor="blue"/>
</canvas>