在这篇文章中主要介绍如何通过javascript实现图片的拖拽。笔者主要使用yahoo的开源类库yui(The Yahoo! User Interface Library)来实现这些功能。yui功能丰富强大，文档齐全，并且不断的在开发新的功能，笔者今后会专门写文章详细介绍yui。

    一. T-shirt的颜色更换

    思路：T-shirt的颜色更换很简单，因为只有一个办法，那就是更换图片。有多少种颜色的T-shirt，就有多少张图片。

    代码：
    var designArea = document.getElementById('designArea');
    designArea.style.background = "url(image/Apparel_White2.jpg)"; 

    我们将所有的设计操作都放在一个id为designArea的DIV中操作。这段代码通过更换div的背景图片来实现T-shirt的颜色更换。

     查看效果

    二. 图片拖拽(drag and drop)效果的实现

    思路：图片的拖拽效果使用yui的 Drag and Drop Utility 来实现。将图片放在DIV中，然后使用new YAHOO.util.DD() 来创建一个可拖动的DIV。需要注意的是，T-shirt的设计区域不能被拖出T-shirt之外，同样用户选择的设计图片也不能被拖出设计区域，在yui中提供了setXConstraint()和setYConstraint来限制拖拽范围。

    html代码：
    <div id="designArea"  class="outerDiv" >
          <div class="frameh" id="frameh"></div> 
    </div>

    JS代码：
    dd = new YAHOO.util.DD('frameh');
    dd.setXConstraint(20, 20);  
    dd.setYConstraint(30, 80);     

    setXConstraint(20,20)表示限定div只能往左拖动20px,往右拖动20px，如果要限定div只能纵向拖动，则设置参数为(0,0)

    实现拖动效果之后，我们还要保存拖动后DIV的位置，随后生成设计图片的时候需要用到。

    JS代码：
    dd.endDrag = function(e)
    {               
            var position = YAHOO.util.DDM.getLocation(dd);
            var top_value = position.top;
            var left_value = position.left;                         
               
    };   
    取得DIV的拖动后的位置之后，我们可以将新的top和left的值保存在hidden域中，这样提交FORM后，我们就可以得到相关的位置信息。

    查看效果