尝试将拖动边界添加到溢出时隐藏的图像答案

【问题标题】：Trying to add dragging boundary to an image hidden on overflow尝试将拖动边界添加到溢出时隐藏的图像
【发布时间】：2018-09-22 19:54:15
【问题描述】：

我正在尝试向此代码添加边界，我可以在其中拖动图像以查看隐藏的部分，而无需以可见背景的方式过度拖动它这意味着当图像的下边界例如到达容器的下边界时，它会停止在该方向上移动

var offset = [0,0];
var mouse_is_down = false

function copie_click(elem, e) {
    mouse_is_down = true;
    offset = [elem.offsetLeft - e.clientX, elem.offsetTop - e.clientY];
}

function copie_unclick(elem, e) {
    mouse_is_down = false;
}

function copie_move(elem, e) {
    e.preventDefault(); // if this is removed mouse will unclick on move
    if (mouse_is_down) {
        elem.style.left = (e.clientX + offset[0]) + 'px';
        elem.style.top  = (e.clientY + offset[1]) + 'px';
    }
}

.mark_item_large {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 1em;
    border-radius: 10px;
    margin-bottom: 0.5em;
    font-weight: 700;
    border: 1px solid black;
}

.mark_item_image {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.mark_item_image > img {
    position: absolute;
    right: 0;
    top: 0;
    width: 200%;
}

        <div class="mark_item_large">
            <div class = "mark_item_image">
                <img src="https://static.wixstatic.com/media/f844a81ff14743ba92ef5f4f498aa2c8.jpeg/v1/fill/w_940,h_495,al_c,q_85,usm_0.66_1.00_0.01/f844a81ff14743ba92ef5f4f498aa2c8.webp" alt="copie preview" onmousedown="copie_click(this, event)" onmouseup="copie_unclick(this, event);" onmousemove="copie_move(this, event);">
            </div>
            .... other stuff here
        </div>

【问题讨论】：

标签： javascript html css draggable

【解决方案1】：

我自己解决了这个问题！

function copie_click(elem, e) {
    mouse_is_down = true;
    offset = [elem.offsetLeft - e.clientX, elem.offsetTop - e.clientY];
}

function copie_unclick(elem, e) {
    mouse_is_down = false;
}

function copie_move(elem, e) {
    e.stopPropagation();
    e.preventDefault(); // if this is removed mouse will unclick on move
    if (mouse_is_down) {
        if ((e.movementX > 0 && e.target.offsetLeft < 0 ) || (e.movementX < 0 && -e.target.offsetLeft < (e.target.offsetWidth - e.target.parentElement.offsetWidth)))
            elem.style.left = (e.clientX + offset[0]) + 'px';
        if ((e.movementY > 0 && e.target.offsetTop < 0 )|| (e.movementY < 0 && e.target.offsetTop > -(e.target.offsetHeight - e.target.parentElement.offsetHeight) ) )
            elem.style.top  = (e.clientY + offset[1]) + 'px';
    }
    disable_click = true;
}

【讨论】：