Question

我有这个弹出窗口，我想让它可以拖动。我到处寻找解决方案，但我找不到一个适合我的方案。我想知道是否有人可以帮助我？这是我的代码：

<script>
$(document).ready(function() {
    //
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size
        var query = popURL.split('?');
        var dim = query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value
        $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        }).prepend('<a href="#" class="close"></a>');
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
        //Apply Margin to Popup
        $('#' + popID).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });
        $('body').append('<div id="fade"></div>');
        $('#fade').css({
            'filter': 'alpha(opacity=80)'
        }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
        return false;
    });
    $('a.close, #fade').live('click', function() {
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove(); //fade them both out
        });
        return false;
    });
});
</script>

CSS：

#fade {
    display: none;
    background: transparent;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .80;
    z-index: 9999;
}
.popup_block{
    color: #000;
    display: none;
    padding: 3px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    float: left;
    font-family: arial;
    font-size: 12px;
    position: fixed;
    top: 55%; left: 50%;
    z-index: 99999;
}
img.btn_close {
    float: right;
    margin: -20 -20px 0 0;
}
*html #fade {
    position: absolute;
}
*html .popup_block {
    position: absolute;
}

如果您需要在link看到它。开始 - ＆gt;消息

Answer 1

由于已加载jQuery UI库，以下代码将使您的弹出块可拖动：

<script>
$(document).ready(function() {
  $('.popup_block').draggable();

  // ...
  // your code
}
</script>

有关可用选项的更多信息，请参阅jQuery UI可拖动窗口小部件的文档：http://api.jqueryui.com/draggable/

jQuery UI还提供了几个用例的演示：https://jqueryui.com/draggable/

让我的弹出窗口可以在任何地方拖动？

1 个答案: