ziqim/zhiqim_ui/document/tutorial/ui/tool/drag.htm

<#def title = "拖拽与缩放"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 拖拽是指定一个可拖动的对象，当鼠标按下时拖拽到其他位置。缩放是指定一个可缩放的对象，当鼠标按下时拉动对象使之放大或缩小。"/>
<#def prevUrl = "ajax.htm"/>
<#def nextUrl = "imageClipper.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav("document")}

<script>
<!--
function doChange(tabnav)
{
    doUpdateCode(Z(tabnav));
}

function doUpdateCode($this)
{//更新代码
    var html = $this.find("section > div").htmlt();
    $this.find("section > div").next("div > span").html(html);
}
//-->
</script>

<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "tool", "drag")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "拖拽与缩放")}
<div class="content">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
    <p class="z-text-blue">拖拽与缩放：</p>
    <p class="z-color-333" style="text-indent:38px;">
        拖拽是指定一个可拖动的对象，当鼠标按下时拖拽到其他位置。缩放是指定一个可缩放的对象，当鼠标按下时拉动对象使之放大或缩小。
    </p>
</div>

<#-- 一、简单拖拽 -->
<div class="tutorial title">一、简单拖拽</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="min-height:250px;">
    <!-- 初始化拖拽控件 -->
    <script>
    Z.onload(function()
    {
        Z.drag("drag_simple", "drag_simple_bar");
    });
    
    function doResize(obj)
    {
        if (Z(obj).text() == "收起")
        {
            Z(obj).text("展开");
            Z("#drag_simple").css("height", "42px");
            Z("#drag_simple_List").css("visibility", "hidden");
        }
        else
        {
            Z(obj).text("收起");
            Z("#drag_simple").css("height", "200px");
            Z("#drag_simple_List").css("visibility", "visible");
        }
    }
    </script>
    <!-- 可拖拽对象和拖把 -->
    <div id="drag_simple" class="z-absolute z-w300 z-h200" style="border:2px solid #888888;z-index:99999;">
        <div id="drag_simple_bar" class="z-relative z-w100p z-h40 z-text-white z-bg-999">
            <div class="z-float-left z-h40 z-lh40 z-pd-l10">全屏(z-index范围)拖拽（可拖动）</div>
            <div class="z-float-right z-mg6"><button class="z-button" onclick="doResize(this);">收起</button></div>
        </div>
        <div id="drag_simple_List" class="z-relative-left z-w100p z-h150 z-bg-gray z-lh25 z-overflow-x-hidden z-overflow-y-auto"></div>
    </div>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、拖拽三要求，可拖拽对象、拖把和拖拽父范围，这三个对象都需要设置id<br>
    2、简单拖拽只需要配置可拖拽对象、拖把两个id，简单拖拽不固定范围<br>
</div>
</section>
</div>

<#-- 二、拖拽范围 -->
<div class="tutorial title">二、拖拽范围</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16"  id="drag_range_parent" style="min-height:250px;">
    <!-- 初始化拖拽控件 -->
    <script>
    Z.onload(function()
    {
        Z.dragInParent("drag_range", "drag_range_bar", "drag_range_parent");
    });

    function doResizeInParent(obj)
    {
        if (Z(obj).text() == "收起")
        {
            Z(obj).text("展开");
            Z("#drag_range").css("height", "42px");
            Z("#drag_range_List").css("visibility", "hidden");
        }
        else
        {
            Z(obj).text("收起");
            Z("#drag_range").css("height", "200px");
            Z("#drag_range_List").css("visibility", "visible");
        }
    }
    </script>
    <!-- 可拖拽对象和拖把 -->
    <div id="drag_range" class="z-absolute z-w300 z-h200" style="border:2px solid #888888;">
        <div id="drag_range_bar" class="z-relative z-w100p z-h40 z-text-white z-bg-999">
            <div class="z-float-left z-h40 z-lh40 z-pd-l10">在指定范围拖动（可拖动）</div>
            <div class="z-float-right z-mg6"><button class="z-button" onclick="doResizeInParent(this);">收起</button></div>
        </div>
        <div id="drag_range_List" class="z-relative-left z-w100p z-h150 z-bg-gray z-lh25 z-overflow-x-hidden z-overflow-y-auto"></div>
    </div>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、拖拽三要求，可拖拽对象、拖把和拖拽父范围，这三个对象都需要设置id<br>
    2、通过Z.dragInParent方法进行初始化，三个参数为三要求的id<br>
</div>
</section>
</div>

<#-- 三、在一定范围内增加、删除和拖放图片和方框 -->
<div class="tutorial title">三、在一定范围内增加、删除和拖拽和缩放图片和方框</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="min-height:250px;">
    <script language="javascript">
    <!--
    var dragList;
    
    Z.onload(function()
    {
        dragList = new Z.DragList({pid: "mainDiv", callback: onCallback});
        dragList.isResizeRate = true;
        dragList.isDeleteIco = true;
        dragList.addImage("../../../inc/www/tutorial/1.png");
        dragList.addImage("../../../inc/www/tutorial/2.png");
        
        var param = {"deliveryCode":"7020100","paramName":"buyerMessage","paramValue":"收-买家留言","referenceValue":"周末不在公司，请快递兄弟周一至周五送，谢谢！","type":0,"paramLeft":150,"paramTop":146,"paramWidth":142,"paramHeight":20,"fontName":"SimSun","fontSize":10,"fontColor":"#000000","bold":0,"italic":0,"underline":0,"alignment":1};
        var value = buildValue(param);
        var params = {width: param.paramWidth, height: param.paramHeight, top: param.paramTop, left: param.paramLeft};
        dragList.addHtml(value, params, {id: param.paramName}, false);
    });
    
    function buildValue(param)
    {
        var _fontName = (param.fontName == "")?"":"font-family:"+param.fontName+";";
        var _fontSize = "font-size:"+param.fontSize+"pt;";
        var _fontColor = (param.fontColor == "")?"color:#000000;":"color:"+param.fontColor+";";
        var _bold = (param.bold == 1)?"font-weight:700;":"";
        var _italic = (param.italic == 1)?"font-style:italic;":"";
        var _underline = (param.underline == 1)?"text-decoration:underline;":"";
        var _alignment = (param.alignment == 1)?"text-align:left;":(((param.alignment == 2)?"text-align:center;":"text-align:right;"));
        var _value = "<div style='width:100%;height:100%;line-height:100%;"+_alignment+_fontName+_fontSize+_fontColor+_bold+_italic+_underline+"'>"+param.paramValue+"</div>";
        
        if (param.type == 2)
        {
            var tableStr = "<table><tr height=22 valign=middle align=center><td width=5%>序号</td><td width=15%>商品编码</td><td width=35%>商品名称</td><td width=15%>规格</td><td width=15%>单价</td><td width=10%>数量</td></tr></table>";
            _value = "<div style='width:100%;height:100%;line-height:100%;"+_alignment+_fontName+_fontSize+_fontColor+_bold+_italic+_underline+"'>"+tableStr+"</div>";
        }
        
        return _value;
    }
    
    function addImage()
    {
        dragList.addImage("../../../inc/www/tutorial/1.png");
    }
    
    function onCallback()
    {//回调
        Z("#realWidth").text(dragList.getWidth());
        Z("#realHeight").text(dragList.getHeight());
    }
    
    function doSetWidth()
    {//手动设置高度
        dragList.setSizeRateWidth(Z("#widthValue").val());
        Z("#realWidth").text(dragList.getWidth());
        Z("#realHeight").text(dragList.getHeight());
    }
    
    function doSetPos(pos)
    {//设置位置
        dragList.setPositionPoint(pos);
        Z("#realWidth").text(dragList.getWidth());
        Z("#realHeight").text(dragList.getHeight());
    }
    //-->
    </script>
    
    <div class="z-relative-left z-w1000 z-h400">
    
        <button class="z-button" onclick="addImage()">添加图片</button>
        
        <!-- 宝贝主图 -->
        <div id="mainDiv" class="z-absolute" style="top:35px;left:20px;width:310px;height:310px;z-index:30;">
            <img id="mainImg" src="../../../inc/www/tutorial/default.jpg" width="100%" height="100%" style="z-index:30;">
        </div>
        
        <!-- 虚线分开 -->
        <div class="z-absolute z-h400" style="top:5px;left:360px;width:1px;border:1px dashed  #d5d5d5"></div>
        
        <!-- 查询宝贝条件 -->
        <div class="z-absolute z-w600 z-h300" style="top:15px;left:370px;">
            <div class="z-absolute z-bold z-color-666" style="top:15px;left:10px;">标签位置：</div>
            <button onclick="doSetPos(1);" class="z-button z-absolute" style="top:10px;left:85px;" >左上</button>
            <button onclick="doSetPos(2);" class="z-button z-absolute" style="top:10px;left:145px;" >右上</button>
            <button onclick="doSetPos(3);" class="z-button z-absolute" style="top:10px;left:205px;" >左下</button>
            <button onclick="doSetPos(4);" class="z-button z-absolute" style="top:10px;left:265px;" >右下</button>
            <div class="z-absolute z-text-red" style="top:15px;left:330px;">注：图标可拖放</div>
            
            <div class="z-absolute z-bold z-color-666" style="top:60px;left:10px;">设置宽度：  </div>
            <div class="z-absolute z-color-666" style="top:55px;left:80px;">
                <input type="text" id="widthValue" name="widthValue" data-options="type:Numeric;paste:true;" size="4" maxlength="3" class="z-input z-red" onkeyup="doSetWidth();">&nbsp;<font style="font-size:12px;">像素</font>&nbsp;&nbsp;
            </div>
            <div class="z-absolute z-color-666" style="top:58px;left:180px;">
                宽：<span id="realWidth" style="width:20px;color:blue;font-size:20px;"></span>&nbsp;<font style="font-size:12px;">像素</font>&nbsp;&nbsp;&nbsp;&nbsp;
                高：<span id="realHeight" style="width:20px;color:blue;font-size:20px;"></span>&nbsp;<font style="font-size:12px;">像素</font>
            </div>
        </div>
    </div>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、比较复制的拖拽和缩放，支持IMG和DIV两种<br>
</div>
</section>
</div>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}