javascript - 拖到屏幕外时如何将div拖回第一个位置

Question

我在 jQuery 中有一个可拖动的 div，可以从它的句柄中拖动。当它被拖出屏幕时，我需要让它恢复到原来的位置。

html:

<div class="mcwindow">
    <div class="wm"></div>
</div>

j查询代码:

$(function() {
    $( ".mcwindow" ).resizable();
    $( ".mcwindow" ).draggable({ handle: ".wm" });
    $( "div, p" ).disableSelection();
});

CSS:

.mcwindow{
position: fixed;
overflow: hidden;
border: 4px solid #80d0ff;
border-top:0px;
}

.wm{
background: #80d0ff;
width:100%;
height:30px;
}

您还可以在此处查看我到目前为止的代码 http://jsfiddle.net/mzage/n0gLjs9q/

Answer 1

如果你想在 div 被拖出边界时将它移回它的起始位置，你可以执行以下操作。它检查拖动停止。其他事件都是拖拽启动:

http://api.jqueryui.com/draggable/

HTML

<div class="mcwindow">
<div class="wm"></div>
</div>

CSS

.mcwindow{
position: fixed;
overflow: hidden;
border: 4px solid #80d0ff;
border-top:0px;
background: white;
border-radius: 5px;
width:200px;
height:100px;
box-shadow: 0px 0px 20px black;
}

.wm{
background: #80d0ff;
width:100%;
height:30px;
}

JS

var $mcWindow = $('.mcwindow');
$mcWindow.resizable();
$mcWindow.draggable({ handle: ".wm" });
$('div, p').disableSelection();

var docWidth = $(document).width();
var docHeight = $(document).height();
var s = { left: $mcWindow.css('left'), top: $mcWindow.css('top')};
$mcWindow.draggable({
    stop: function(event, ui) {

        if (ui.position.left < 0) {
            $(this).css({ 'left': 0 });
        }
        if (ui.position.left > docWidth-$(this).width()) {
            $(this).css({ 'left': docWidth-$(this).width()-10 });
        }
        if (ui.position.top < 0) {
            $(this).css({ 'top': 0 });
        }
        if (ui.position.top > docHeight-$(this).height()) {
            $(this).css({ 'top': docHeight-$(this).height()-10 });
        }
    }
});

http://jsfiddle.net/mzage/n0gLjs9q/3/