使用JS与JQuery实现图片拖拽功能出现异常该如何解决？

正常加载完成的图片被浏览器赋予了默认的原生拖拽行为，拖拽时会触发系统级的图片拖动效果，抢占了自定义mousemove事件的执行逻辑，因此自定义拖拽表现异常。右键拖拽时不会触发浏览器默认的图片拖动行为，所以功能正常。

• 方案1：在mousedown事件中阻止默认行为
  直接在现有的mousedown回调里增加e.preventDefault()，即可禁用浏览器默认的图片拖拽逻辑，修改后的JS代码如下：

let draggable;
let offset;

$(document).on('mousedown', '.piece', e =>{
    draggable = $(e.target);
    offset = {x: e.offsetX, y: e.offsetY};
    e.preventDefault(); // 新增这行，阻止默认行为
}).mousemove(e=>{
    if(draggable){
        draggable.css({top: e.clientY - offset.y, left: e.clientX - offset.x});
    }
}).mouseup(()=>{
    draggable = null;
})

• 方案2：给图片标签禁用原生拖拽属性，同时增加不可选中样式
  给img标签添加draggable="false"属性，同时修改CSS增加用户不可选中规则，也可以解决问题：
  修改后的CSS代码：

.piece {
    position: absolute;
    top: 10px;
    left: 10px;
    user-select: none; /* 新增，防止拖拽时选中元素内容 */
}

修改后的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p1" ><img class="piece" src="https://i.sstatic.net/UM6k6.png?s=256&g=1" alt="noimage" srcset="" draggable="false"></div>

内容的提问来源于stack exchange，提问作者yih613