js 图片拖动效果的bug

今天做一个拖动排序的效果（demo）
功能很明确，拖动部分居然出现问题。
调试近一个小时，最终发现是浏览器默认行为导致的。
对img对象进行拖动，ff和chrome会创造一个跟随的半透明图片副本，光标变为“阻止”。

 

 

同时鼠标移动不再触发mousemove事件。
解决方案：使用div设置背景替代img标签
<div class=”pic”></div>
.pic {
width: 13px;
height: 16px;
background-image: url(“ic_launcher.png”);
}

这个问题点略偏。
调试蛮久，记录一下。
贴下09年“想当然”实现的拖动类。
虽然后来看到了许多完备实现，然而面对问题时发觉还是自己东西用着最顺手。
预先解决小问题，碰到大问题就能降低复杂度并大大减轻思想负担。

被工作推着走了这么久，从技术狂热、跃跃欲试到克制热情、应用为王，
竟然已经有很久没有想着去解决一个复杂点的技术问题了。
有些项目觉得已经想的很清楚了，却迟迟不能下手。
今天顺着zuo.com看到许多执行力强人，颇受触动。
生活渐稳定，要多写代码让别人认识自己。

e.g.
$("#move_handle").bind("mousedown", {dragedDom: MoveableDom}, Drag.start);

var Drag = {
            dragedDom : null,
            difX : null,
            difY : null,
            start : function(event) {          
                Drag.difX = parseFloat(Drag.dragedDom.css("left")) - event.pageX;
                Drag.difY = parseFloat(Drag.dragedDom.css("top")) - event.pageY;

                $(document).bind("mousemove", Drag.dragging);
                $(document).bind("mouseup", Drag.end);
            },

            dragging : function(event) {
                Drag.dragedDom.css("left", event.pageX + Drag.difX);
                Drag.dragedDom.css("top", event.pageY + Drag.difY);
            },

            end : function(event) {
                    $(document).unbind("mousemove", Drag.dragging);
                    $(document).unbind("mouseup", Drag.end);
                    Drag.dragedDom = null;
                    Drag.difX = null;
                    Drag.difY = null;
            }
    };