CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable
Tom
Tom

Reputation: 35

Draggable/Droppable: trigger a drop on location after time

Relevant Code:

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

What I'm trying to do: a set amount of time since the dragging has begun, force the item being dragged to drop even if the user does not unclick. The drop code runs as intended the user is still dragging the item. I can't seem to destroy the helper, stop the dragging process from continuing, or force a drop (unclick) to be recognized

Upvotes: 0

Views: 141

Answers (3)

ilgice
ilgice

Reputation: 41

As I understand it, draggable objects css value is position:relative; It happens, if position changes to static in start it can be continued or ok or vice versa

  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;');
     }
  });

or vice versa

  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>

Upvotes: 0

Tom
Tom

Reputation: 35

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

I have found that the above code forces a drop

Upvotes: 1

Ssss Ppppp
Ssss Ppppp

Reputation: 4404

Try this:

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

Upvotes: 0

Related Questions