Draggable/Droppable：在一段时间后触发位置放置答案

【问题标题】：Draggable/Droppable: trigger a drop on location after timeDraggable/Droppable：在一段时间后触发位置放置
【发布时间】：2014-04-04 16:24:06
【问题描述】：

相关代码：

$( ".tile" ).draggable({
  helper: "clone",
  start:function ( event, ui){
    setTimeout(function(){
      destroyHelper();
      doSomething();
    },1000);
  },
  stop:function( event, ui ) {
    doSomething();
  }
});

我正在尝试做的事情：自拖动开始后的一段时间内，即使用户没有取消单击，也强制拖动的项目放下。放置代码按预期运行，用户仍在拖动项目。我似乎无法销毁助手、停止继续拖动过程或强制识别拖放（取消点击）

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

  $(document).trigger("mouseup");

我发现上面的代码强制删除

【讨论】：

【解决方案2】：

试试这个：

$( ".tile" ).draggable({
  helper: "clone",
  start:function ( event, ui){
    setTimeout(function(){
      $( ".tile" ).trigger("dragstop");
    },1000);
  },
  stop:function( event, ui ) {
    doSomething();
  }
});

【讨论】：

【解决方案3】：

据我了解，可拖动对象的 css 值为 position:relative;发生这种情况，如果位置在开始时变为静态，则可以继续或正常，反之亦然

  jQuery(".draggable_class_name_1").draggable({
     start:function(event,ui)
     {
        jQuery('.draggable_class_name_1').css('cssText','position:static !important;');
        var t = setTimeout(function() {
        jQuery('.draggable_class_name_1').css('cssText','position:relative !important;');
       }, 1000);
     },
     stop:function(event,ui)
     {
        jQuery('.draggable_class_name_1').css('cssText','position:relative !important;');
     }
  });

反之亦然

  jQuery(".draggable_class_name_2").draggable({
     start:function(event,ui)
     {
        jQuery('.draggable_class_name_2').css('cssText','position:relative !important;');
        var t = setTimeout(function() {
        jQuery('.draggable_class_name_2').css('cssText','position:static !important;');
       }, 1000);
     },
     stop:function(event,ui)
     {
        jQuery('.draggable_class_name_2').css('cssText','position:relative !important;');
     }
  });

      jQuery(".draggable_class_name_1").draggable({
         start:function(event,ui)
         {
            jQuery('.draggable_class_name_1').css('cssText','position:static !important;');
            var t = setTimeout(function() {
            jQuery('.draggable_class_name_1').css('cssText','position:relative !important;');
           }, 1000);
         },
         stop:function(event,ui)
         {
            jQuery('.draggable_class_name_1').css('cssText','position:relative !important;');
         }
      });

      jQuery(".draggable_class_name_2").draggable({
         start:function(event,ui)
         {
            jQuery('.draggable_class_name_2').css('cssText','position:relative !important;');
            var t = setTimeout(function() {
            jQuery('.draggable_class_name_2').css('cssText','position:static !important;');
           }, 1000);
         },
         stop:function(event,ui)
         {
            jQuery('.draggable_class_name_2').css('cssText','position:relative !important;');
         }
      });

.draggable_class_name_1 {
   margin-bottom:25px;
   width:50px;
   height:50px;
   line-height:50px;
   border:1px solid red;
   cursor:move;
}
.draggable_class_name_2 {
   width:50px;
   height:50px;
   line-height:50px;
   border:1px solid red;
   cursor:move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="draggable_class_name_1"><div>Drag 1</div></div>
<div class="draggable_class_name_2"><div>Drag 2</div></div>

【讨论】：