1. 基础外观

    提示文字
    <div class="c_drag" style="left:100px; top:100px; width:250px;">
    	<div class="label">提示文字</div>
    	<div class="status"></div>
    	<div class="bg"><span></span></div>
    	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
    </div>
    

    【注】c_drag 的代码一般情况下必须写在 m_wrapper2 之内。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head jwcid="@Head"></head>
    <body jwcid="@Body">
    <div class="m_wrapper"><div class="m_wrapper2">
    
    
    
    <!-- 页面内容 -->
    <!-- c_drag 的位置 -->
    
    
    </div></div>
    </body>
    </html>
    
  2. 扩展外观

    1. 模拟不同的组件项

      1. 分页标签

        提示文字
        <div class="c_drag c_drag-tab" style="left:100px; top:100px;">
        	<div class="label">提示文字</div>
        	<div class="status"></div>
        	<div class="bg"><span></span></div>
        	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
        </div>
        
      2. 分页标签当前状态

        提示文字
        <div class="c_drag c_drag-tabOn" style="left:100px; top:100px;">
        	<div class="label">提示文字</div>
        	<div class="status"></div>
        	<div class="bg"><span></span></div>
        	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
        </div>
        
      3. 二级分页标签

        提示文字
        <div class="c_drag c_drag-tab2" style="left:100px; top:100px;">
        	<div class="label">提示文字</div>
        	<div class="status"></div>
        	<div class="bg"><span></span></div>
        	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
        </div>
        
      4. 二级分页标签当前状态

        提示文字
        <div class="c_drag c_drag-tab2On" style="left:100px; top:100px;">
        	<div class="label">提示文字</div>
        	<div class="status"></div>
        	<div class="bg"><span></span></div>
        	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
        </div>
        
      5. 三级分页标签

        提示文字
        <div class="c_drag c_drag-tab3" style="left:100px; top:100px;">
        	<div class="label">提示文字</div>
        	<div class="status"></div>
        	<div class="bg"><span></span></div>
        	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
        </div>
        
      6. 三级分页标签当前状态

        提示文字
        <div class="c_drag c_drag-tab3On" style="left:100px; top:100px;">
        	<div class="label">提示文字</div>
        	<div class="status"></div>
        	<div class="bg"><span></span></div>
        	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
        </div>
        
    2. 禁止状态设置

      提示文字
      <div class="c_drag" style="left:100px; top:100px; width:250px;">
      	<div class="label">提示文字</div>
      	<div class="status status-forbidden"></div>
      	<div class="bg"><span></span></div>
      	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
      </div>
      
    3. 拖曳前的管理形式

      组件外观:

      提示文字

      应用时:

      • 客户姓名:
      • 出生年月:
      • 年龄:
      • 手机号码:
      提示文字
      <div class="c_drag c_drag-ready" style="left:100px; top:100px; width:250px;">
      	<div class="label">提示文字</div>
      	<div class="status"></div>
      	<div class="fn">
      		<a href="#nogo" class="config"></a>
      		<a href="#nogo" class="delete"></a>
      	</div>
      	<div class="bg"><span></span></div>
      	<!--[if IE 6]><iframe class="cover"></iframe><![endif]-->
      </div>
      

      管理功能默认是隐藏的,只有在设置了 c_drag-ready 时才显示。