jQuery拖放模擬對最後一個draggable不起作用



jquery-ui drag-and-drop (1)

這是因為它只是在沒有 drop 情況下模擬 drag 事件,而是使用 drag-n-drop

draggable.simulate("drag-n-drop", {dx: dx,  dy: dy});

我試圖使用 jquery-ui的 jquery-simulate-ext 插件來模擬拖放 jquery-simulate-ext

在我提供場景細節之前,讓我告訴你 here 的js小提琴。

我有3列 divs 。 在第1列中,我有3個帶有國家/地區名稱的可拖動,第2列有3個空白 divs 和第3列3個帶有城市名稱的正常 div 。 因此,在第一列的所有可拖動物落在第二列之後,第二和第三列行將了解鄉村與城市的關係。

但問題是 在模擬完成後,第一個和第二個可拖動器被丟棄在預期的可投放器上,但第三個可拖動只是粘在鼠標上而不是掉落在投放器上。 要查找行為,在上面提到的js小提琴頁面加載後,只需將鼠標光標移動到結果部分,您就會看到一個可拖動的鼠標也隨之移動。 您必須單擊某處以使可拖動的坐在可放置或可拖動的部分(取決於您單擊的區域)。 這只發生 在Firefox中, 在chrome中 ,draggable只是隨著光標一起移動到適當的可放置部分內部,然後自動進入內部。

我想要的是: 與其他可拖動器一樣,第三個拖動器不應隨著鼠標的移動而移動,並且應該自動坐在所需的可放置物上。

代碼說明:

draggable_div 每個可拖動 div 都有一個屬性 data-index (值1,2,3等)。 對於droppable divs (使用class droppable_blank ),情況也是如此。 現在在JS代碼的開頭,我有一句話:

answers_found='[1,2,3]';

這些基本上是來自draggables的 data-index 值。 值的順序僅顯示當draggables位於droppable上時 data-index 值的順序。 在上面提到的情況下,第一個值是1,因此它將是第一個(不是第二個或第三個)可拖動的,它將位於第一個droppable上。 類似地,第二和第三可拖動將連續地位於第二和第三可放置。

代碼執行以下 for 循環

for(var i =0; i<answers_found.length; i++){

answers_found 數組中獲取每個值。 此值是可拖動的 data-index 屬性值。 然後 call_trigger_drop 函數給出2個參數:

call_trigger_drop(parseInt(answer_found_indiv),droppable_index);

第一個是可拖動索引,第二個是 相應 的可放置索引,即拖動將位於droppable上。 然後使用以下行進行實際模擬:

draggable.simulate("drag", {
                dx: dx,
                dy: dy
            });

TL; DR:

第一列中的可拖動模擬被放置在第二列的droppables上,而第三列是正常 div 。 在拖放模擬之後,第3個draggable不會位於Firefox中的第3個droppable上,並隨光標移動直到發生單擊。 如何讓它像其他拖動器一樣自動坐在droppable上?

編輯:
如果你想把結果作為普通網頁而不是js-fiddle,你可以在 here 找到。

console = {};
console.log = function(){};
window.console = console;
drag_stop_counter = 0;
answers_found = '[3,2,1]';
answer_all_zero = 0; //REMOVABLE
if (answers_found != "".trim()) {
  answers_found = $.parseJSON(answers_found);
  answer_all_zero = 1;
  for (var i = 0; i < answers_found.length; i++) {
    if (parseInt(answers_found[i]) != 0) {
      answer_all_zero = 0;
      break;
    }
  } //end of for loop
}
total_answers_found = answers_found.length;
total_actual_answers_found = 0;
for (var i = 0; i < answers_found.length; i++) {
  if (parseInt(answers_found[i])) {
    ++total_actual_answers_found;
  }
} //end of for loop
answers = [];
answers_made_for_insert = [];
question_id = 2901;
//Following function is triggered
//when the dNd component is starting the drop
//event
function trigger_drop(draggable_elem_index, droppable_elem_index) {
  if (draggable_elem_index && droppable_elem_index) {
    if (window.console) {
      console.log("from within trigger_drop : draggable_elem_index = " + draggable_elem_index + " droppable_elem_index=  " + droppable_elem_index);
    }
    // var draggable = $(".draggable_container_indiv .draggable_div").eq(draggable_elem_index-1).draggable(),
    var draggable = $(".draggable_container_indiv").eq(draggable_elem_index - 1).find(".draggable_div").draggable(),
      droppable = $("#droppable_slots .droppable_blank").eq(droppable_elem_index - 1).droppable(),
      droppableOffset = droppable.offset(),
      draggableOffset = draggable.offset(),
      dx = droppableOffset.left - draggableOffset.left,
      dy = droppableOffset.top - draggableOffset.top;
    draggable.simulate("drag", {
      dx: dx,
      dy: dy
    });
  } // end of if(draggable_elem_index && droppable_elem_index){
} // end of function trigger_drop(

//answers stored in array for insertion in DB
function make_answers_for_insert(answer_given) {
  answers_made_for_insert.push(answer_given);
} //end of function answers_for_insert
//finds answers from array
function find_answers() {
  answers = [];
  $('input[name="' + question_id + '[]"]').each(function() {
    $elem = $(this);
    var value_found = $elem.val().trim();
    if (value_found == "".trim()) {
      value_found = "0";
    }
    // if(value_found!="".trim()){
    answers.push(value_found);
    // }
  });
  //alert("answers made "+answers);
  if (window.console) {
    console.log("answers from find_answers = ");
    console.log(answers);
  }
} //end of function find_answers

function call_trigger_drop(answer_found_indiv, droppable_index) {
  trigger_drop(answer_found_indiv, droppable_index);
}
function insert_answer() {
  if (window.console) {
    console.log(" can_submit in insert_answer = " + can_submit);
  }
  if (can_submit) {
    can_submit = 0
    $("#draggable .draggable_div").draggable('disable');
    //ui.draggable.draggable({disabled: true});
    $('#droppable_slots li').find('.ui-draggable').draggable({
      disabled: true
    });
    answers = [];
    $('input[name="' + question_id + '[]"]').each(function() {
      $elem = $(this);
      var value_found = $elem.val().trim();
      if (value_found == "".trim()) {
        value_found = "0";
      }
      // if(value_found!="".trim()){
      answers.push(value_found);
      // }
    });
    answers = JSON.stringify(answers);
    if (window.console) {
      console.log("answers from insert_answers = ");
      console.log(answers);
    }
    //ajax call for insertion
  } // end of if(can_submit){
} // end of function insert_anwers
$(document).ready(function() {
  answer_status = 0;
  review_table_status = 0;
  $('input[name="' + question_id + '[]"]').each(function() {
    var dnd_value_found = $(this).val().trim();
    if (window.console) {
      console.log(" dnd_value_found = " + dnd_value_found);
    }
    if (dnd_value_found != "".trim()) {

      answer_status = 1;
      review_table_status = 1;
      return false;
    }
  }); // end of each
  var draggable_counter = 0;
  $(".draggable_container_indiv").each(function() {
    // $draggable_elem=$(this);
    $draggable_elem = $(".draggable_div").eq(draggable_counter);
    var $droppable_elem = $(".droppable_content_indiv").eq(draggable_counter);
    var $draggable_container_indiv_elem = $(".draggable_container_indiv").eq(draggable_counter);
    var $droppable_blank_elem = $(".droppable_blank").eq(draggable_counter);
    var droppable_height = $droppable_elem.css('height');
    var draggable_height = $draggable_elem.css('height');
    var droppable_width = $droppable_elem.css('width');
    var draggable_width = $draggable_elem.css('width');
    var height_more = 0;
    if (parseInt(draggable_height) > parseInt(droppable_height)) {
      height_more = draggable_height;
    } else {
      height_more = droppable_height;
    }
    var width_more = 0;
    if (parseInt(draggable_width) > parseInt(droppable_width)) {

      width_more = draggable_width;

    } else {
      width_more = droppable_width;
    }

    if (window.console) {

      console.log(" draggable_height " + draggable_height + " droppable_height = " + droppable_height + " height_more = " + height_more);

    }
    $draggable_elem.css({
      'height': height_more
    });
    $droppable_elem.css({
      'height': height_more
    });
    $droppable_blank_elem.css({
      'height': height_more
    });
    $draggable_container_indiv_elem.css({
      'height': height_more
    });
    //$('.draggable_container_indiv').css({'height':22});// hhhhhhhh

    $draggable_elem.css({
      'width': width_more
    });
    $droppable_elem.css({
      'width': width_more
    });
    $droppable_blank_elem.css({
      'width': width_more
    });
    $draggable_container_indiv_elem.css({
      'width': width_more
    });
    $droppable_elem.find(".ui-draggable").css({
      'width': width_more
    });


    ++draggable_counter;



  });


  $("#draggable .draggable_div").draggable({
    scroll: false,
    revert: true,
    // helper: 'clone',
    //appendTo: 'body',
    start: function() {

      if (window.console) {

        console.log(" draggable started ....... ");
      }

      $(this).css({
        display: 'none'
      });


    },
    stop: function() {


      $(this).css({
        display: 'block'
      });
      var draggableIndex = $(this).data('index');
      ++drag_stop_counter;
      if (window.console) {

        console.log(" draggable stopped = " + drag_stop_counter);

        console.log("draggable index in stop = " + draggableIndex);

      }


      var droppableIndex = $('#droppable_slots li').find('.ui-draggable[data-index=' + draggableIndex + ']').closest('.slot').data('index');

      var index_found = $.inArray(draggableIndex + "", answers);

      if (window.console) {
        console.log("inside stop  draggableIndex = " + draggableIndex + " after dropped ..... index_found = " + index_found);

      }



    },
    revert: function(dropped) {


      var dropped = dropped && dropped.hasClass('slot'); //fix duplicated IDs
      if (!dropped) {
        $(this).appendTo($(this).data('originalParent'))
      }
      return !dropped;


    },
    revertDuration: 0, //removed glitched effect
    helper: function() {
      return $(this).clone().appendTo('body').show();
    },
    containment: '.sel_screen_left'
  }).each(function() {
    $(this).data('originalParent', $(this).parent())
  });


  $("#droppable_slots li").droppable({
    //        tolerance:'pointer',
    tolerance: 'intersect',
    drop: function(event, ui) {

      $(this).trigger('dropthis', [event, ui]); //REMOVABLE

      $(this).trigger("dropthis", [{}, {
        draggable: ui.draggable
      }]); //REMOVABLE



      var $this = $(this);
      if ($this.find('.ui-draggable').length) return; //don't overwrite occupied spot
      //$this.empty();
      $this.append(ui.draggable);

      var width = $this.width();
      var height = $this.height();
      var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
      var cntrTop = (height / 2) - (ui.draggable.height() / 2);

      ui.draggable.css({
        left: cntrLeft + "px",
        top: cntrTop + "px"
      });

      var draggableIndex = parseInt(ui.draggable.data("index"));
      var droppableIndex = parseInt($(this).data("index"));

      if (window.console) {

        console.log(" draggableIndex = " + draggableIndex + " droppableIndex = " + droppableIndex + " question_id = " + question_id);

      }


      if (window.console) {
        console.log("droppable question_id = " + question_id);
        console.log(" droppable drop has  draggableIndex answer  = " + draggableIndex);

      }




      if (window.console) {
        console.log(" inside drop .......................... ");

      }


      var index_found = $.inArray(draggableIndex + "", answers);

      if (window.console) {
        console.log(" draggableIndex = " + draggableIndex + " after dropped ..... index_found = " + index_found);

      }
      if (index_found != -1) {
        answers[index_found] = '';

        $('input[name="' + question_id + '[]"]').eq(index_found).val('');
      }






      $(".droppable_blank[data-index=" + droppableIndex + "]").trigger('click');

      if (window.console) {
        console.log(" droppable_blank clicked   droppableIndex = " + droppableIndex);

      }



    },
    out: function(event, ui) {


    },
    over: function(event, ui) {

    }
  });



  if (window.console) {

    console.log("DnD ANSWERS  found = ");
    console.log(answers_found);

  }


  answer_found_indiv = 0;
  droppable_index = 0;
  for (var i = 0; i < answers_found.length; i++) {

    //return false;

    if (window.console) {

      console.log(" iterating all answers:  DnDDnDDnDDnDDnD dragndrop draggable index = " + answers_found[i] + " droppable index = " + (i + 1));

    }

    var droppable_index = i + 1;
    var answer_found_indiv = parseInt(answers_found[i]);
    if (answer_found_indiv == 0) {

      if (window.console) {

        console.log(" answer_found_indiv 000000000000000000");

      }

    } else if (answer_found_indiv) {

      if (window.console) {

        console.log("Trigger Drop = " + answer_found_indiv, " droppable_index = " + droppable_index);

      }

      call_trigger_drop(parseInt(answer_found_indiv), droppable_index);

    }



  } // end of for loop




});
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.draggable_container_indiv{

    border: 1px solid green;

}

#draggable .draggable_div {
    margin-left: -60px;
    padding: 10px;
}
.droppable_blank{
    /*line-height: 40px;*/
    vertical-align: middle;
}
#draggable li, #draggable .draggable_div, #droppable_slots li, .draggable_div{
    list-style: none;
}
.dragndrop-questions ul.option-left li{
    padding-top: 0;
}
.match-questions ul.option-left li, .dragndrop-questions ul.option-left li{
    font-size: 14px;
    color: #656f7d;
    position: relative;
    padding-left: 60px;
    min-height: 40px;
}

.draggable_container_indiv{

    margin-bottom: -10px !important;
}
<link href="https://epractice.lcbsdhaka.com/mytest/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.css"></link>
    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-1.12.4.js"></script>


    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

    <script src="https://epractice.lcbsdhaka.com/mytest/js/bootstrap.min.js"></script>

    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery.simulate.js"></script>
    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-simulate-ext/src/jquery.simulate.ext.js"></script>
    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-simulate-ext/src/jquery.simulate.drag-n-drop.js"></script>


<script src="https://epractice.lcbsdhaka.com/mytest/js/bootstrap.min.js"></script>

<script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>



<div class="dragndrop-questions row">



  <div>
    <div style="width:30%; float: left; ">
      <ul class="option option-left" id="draggable">

        <li  class="draggable_container_indiv noselect">
          <div class="draggable_div" data-index="1">

            USA
          </div>
        </li>

        <li  class="draggable_container_indiv noselect">
          <div class="draggable_div" data-index="2">

            JAPAN
          </div>
        </li>

        <li  class="draggable_container_indiv noselect">
          <div class="draggable_div" data-index="3">

            CHINA
          </div>
        </li>

      </ul>
    </div>
    <div  style="width:65%; float: right; margin-right: 10px;">
      <ul class="option option-right" id="droppable_slots">


        <div class="row ">
          <div style="width:45%; float: left; margin-left:10px; border: 1px solid red;">

            <li class="slot droppable_blank noselect" data-index="1">


            </li>

          </div>
          <div style="width:48%; float: right; border: 1px solid yellow;">


            <li class="droppable_content_indiv noselect">
              <p>
                NewYork
              </p>


            </li>
          </div>
        </div>
        <!--end of class row -->

        <div class="row ">
          <div style="width:45%; float: left; margin-left:10px; border: 1px solid red;">

            <li class="slot droppable_blank noselect" data-index="2">


            </li>

          </div>
          <div style="width:48%; float: right; border: 1px solid yellow;">


            <li class="droppable_content_indiv noselect">
              <p>
                Tokyo
              </p>

            </li>
          </div>
        </div>
        <!--end of class row -->


        <div class="row ">
          <div style="width:45%; float: left; margin-left:10px; border: 1px solid red;">

            <li class="slot droppable_blank noselect" data-index="3">


            </li>

          </div>
          <div style="width:48%; float: right; border: 1px solid yellow;">


            <li class="droppable_content_indiv noselect">
              <p>
                Beijing
              </p>

            </li>
          </div>
        </div>
        <!--end of class row -->




      </ul>
    </div>

    <div class="" style="clear: both;"></div>
  </div>


</div>
<!-- end of class dragndrop-questions-->





jquery-ui-droppable