Question

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

HTML：

CAST (DATEADD(SECOND, SEM_AGENT.LAST_UPDATE_TIME /1000 + 8*60*60, 107) AS VARCHAR(50)) as Last_Checkin

jquery代码：

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

的CSS：

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

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

Answer 1

如果要将div拖回界限，如果要将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/

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

1 个答案: