Question

我有这个jquery

        $(".tagdiv").draggable({
                 drag: function(e, ui) {}
            });
        $(".tagdiv").on('drag',function(e,ui){
            var lft=parseInt($(this).css('left'));
            var mlft=parseInt($(this).css('margin-left'));
            if (lft==mlft-(mlft*2))  {
                $(this).trigger("mouseup").draggable('disable');
            }
        });

当用户拖动tagdiv并达到lft==mlft-(mlft*2)拖动禁用时，他无法拖动到任何地方。但我希望他能够拖动到任何地方而不是左边。

Answer 1

从containment ：您可以使用以[x1，y1，x2，y2]形式定义边界框的数组

所以你可以这样写：

$(function () {
  var mlft = parseInt($(".tagdiv").css('margin-left'));
  var mrgt = $(document).width() - $(".tagdiv").outerWidth() - mlft;

  $(".tagdiv").draggable({
    containment: [mlft, 0, mrgt, $(document).outerHeight()]
  });
});

.tagdiv {
  width: 100px;
  height: 150px;
  padding: 0.5em;
  margin-left: 50px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content tagdiv">
    <p>Drag me around</p>
</div>

相反，如果您需要修改代码，可以使用：

event.preventDefault();

而不是：

$(this).trigger("mouseup").draggable('disable');

此外使用：

ui.offset.left

得到左偏移位置而不是：

$(this).css('left')

摘录：

$(function () {
  $(".tagdiv").draggable({
    drag: function( event, ui ) {
      var lft = ui.offset.left;
      var mlft = parseInt($(this).css('margin-left'));
      if (lft<=mlft-(mlft*2))  {
        event.preventDefault();
      }
    }
  });
});

.tagdiv {
  width: 100px;
  height: 150px;
  padding: 0.5em;
  margin-left: 150px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content tagdiv">
    <p>Drag me around</p>
</div>

Jquery禁用仅向左拖动

1 个答案: