jQuery 拖放模拟不适用于最后一个可拖动的对象-6ren

jQuery 拖放模拟不适用于最后一个可拖动的对象

转载作者：行者123 更新时间：2023-11-30 23:44:03

我正在尝试使用 jquery-simulate-ext 来模拟拖放模拟jquery-ui的插件.

在详细介绍场景之前，让我向您展示 js fiddle here .

我有 3 列 div。在第一列中，我有 3 个带有国家/地区名称的可拖动元素，在第二列中有 3 个空白 div 的可拖动元素，在第三列中有 3 个带有城市名称的普通 div 元素。因此，在第一列中的所有可拖动对象都放置在第二列上之后，第二列和第三列行将产生乡村与城市关系的感觉。

但问题是模拟完成后，第一个和第二个可拖动对象被放置在预期的可放置对象上，但第三个可拖动对象只是粘在鼠标上而不是放置在可放置对象上。要找到这种行为，在加载上述 js fiddle 页面后，只需将鼠标光标移动到结果部分，您将看到可拖动对象也随着鼠标移动。您必须单击某处才能使可拖动部分位于可放置或可拖动部分(取决于您单击的区域)。这种情况仅在 Firefox 中发生，而在 chrome 中，可拖动对象仅在适当的可放置部分内随光标移动，然后自动位于其中。

我想要的是:与其他可拖动对象一样，第三个可拖动对象不应随着鼠标的移动而移动，而应自动位于所需的可拖动对象上。

代码说明:

每个具有 draggable_div 类的可拖动 div 都有一个属性 data-index (值 1、2、3 等)。同样的情况也适用于 droppable div (带有类 droppable_blank)。现在，在 JS 代码的开头，我有以下行:

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

这些基本上是可拖动对象中的data-index值。值的顺序仅显示可拖动对象位于可放置对象上时的 data-index 值的顺序。在上述情况下，第一个值为 1，因此第一个(不是第二个或第三个)可拖动对象将位于第一个可放置对象上。同样，第二个和第三个可拖动对象将连续位于第二个和第三个可放置对象上。

代码执行以下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);

第一个是可拖动索引，第二个是相应可放置索引，即可拖动对象将位于可放置对象上。实际模拟通过以下几行进行:

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

TL；博士:

第一列的 Draggables 被模拟放置在第二列的 droppables 上，而第三列只是普通的 div。拖放模拟之后，第三个可拖动项不会位于 Firefox 中的第三个可拖放项上，而是会随着光标移动，直到发生单击为止。 如何让它像其他可拖动对象一样自动放置在可放置对象上？

编辑:
如果你想得到一个普通网页而不是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-->

最佳答案

这是因为它只模拟drag事件，而没有drop，请使用drag-n-drop代替。

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

关于jQuery 拖放模拟不适用于最后一个可拖动的对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54498364/

文章推荐： jquery - Codeigniter 中的 ERR_EMPTY_RESPONSE

文章推荐： jquery - 单击 anchor 标记时将其链接复制到剪贴板

文章推荐： jquery - 在 Firefox 和 IE 中使用 jquery 防止 onbeforeunload 警报

jquery - 使用 Kendo 拖/放创建多选元素
我在这里有一个我想要做的事情的例子:http://jsbin.com/OwoYAlEQ/1/edit 这是我的 HTML: person one person two person three per
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl
WPF ListView 数据绑定(bind)拖/放自动滚动
我一直在使用 Bea 的解决方案 here一段时间后发现它非常有帮助。现在我遇到的问题是，当我将项目拖放到另一个 ListView 控件中或拖放到另一个 ListView 控件中，并且我想在拖动“期间
python - pyqt QTreeWidget setItemWidget 拖/放后消失
我试图在使用 QTreeWidget.setItemWidget() 重新父级(拖放)后将小部件放入 QTreeWidgetItem 但是，如果编译以下代码，结果是 QTreeWidgetItem 内
javascript - 拖/放问题(可拖动到位置 :relative parent)
这是场景，我使用的是prototype和scriptaculous，但我相信jquery也会有同样的问题。我在相对定位的 div 中有一个可拖动图像的列表。问题是我无法将图像拖出父 div...好吧.
带有表格主体/行扭曲宽度的 Angular CDK 拖/放列表(无 Material )
我正在使用一个普通(Bootstrap)表，我想在其中包含可排序的行。我正在使用 Angular CDK (DragDropModule) 来实现排序/排序。但是，当拖动行时，它会扭曲宽度，因为 cd
swift - 如何在 UICollectionView 拖/放过程中删除 'ghost' 单元格，并使移动单元格不透明？
我正在尝试在我的 UICollectionView 中实现拖放机制，这与在快捷方式应用程序中重新排序快捷方式的组件非常相似。截至目前，行为是当您开始拖动时，会留下一个透明的单元格 View ，而另一
Jquery UI 拖/放，一个 div 可以工作，另一个则不能。怎么修？
我有以下 Jquery UI 拖放 jsfiddle https://jsfiddle.net/zoojsfiddle/ud96jdcp/ 具有
javascript - 使用 Jquery 创建基于 Web 的 "bulletin board pin map"；拖/放/碰撞/等
我希望创建一个基于网络的“公告板”，可以这么说，用户可以在其中创建/删除/拖放“图钉”，而不允许重叠“图钉”。这是一个图表，应该有助于说明我正在尝试创建的内容: 'pins' 可能已创建双击；他们会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jQuery 拖放模拟不适用于最后一个可拖动的对象