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 警报

c# - 属性与 get 之间的区别；放;没有得到；放;
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。我不明白静态属性之间的区别: p
jquery拖/放-获取被拖放的元素的id
当元素被拖放时，有没有办法从被拖动的元素中获取 id(或其他属性值)？例如，在左侧，我有一堆 div，我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
c# - 获取问题；放;
每当我更改其中一个类属性时，我想设置一个修改标志，如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
C# HttpClient 放
由于某种原因，我下面的代码曾经可以正常工作，但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
javascript - 放；在函数定义的末尾
为什么将 ; 放在最佳实践中？在函数定义的末尾。例如 var tony = function () { console.log("hello there"); }; 优于: var tony
bitmap - EaselJS:有问题的拖/放
我在容器内有一个位图。当我拖动容器时，光标变为编辑文本形状，图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。这是我的代码，所以你可以看到我有 RTFM: function createIc
c# - 表达式主体属性与 {get;放;}
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。当我让 Visual Studio 20
c# - 多么简单的得到；放;在一个类意味着？
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
javascript - 放(存)json数据
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
c# - { 得到;放; } 在变量声明中
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。我在一本书上找到这样声
c# - 得到;放;变量
我正在设置多个方法，想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。主要方法: public static void Main(string[] args) { i
bash - Hadoop Crontab 放
我正在尝试使用 crontab 编写一个简单的任务，将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
javascript - 限制 jQuery 中节点的拖/放？
有人可以告诉我如何使用这个解决方案来解决我的问题吗？我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
javascript - jquery sortable 禁用特定项目之间的拖/放
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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