大佬教程收集整理的这篇文章主要介绍了jQuery拖放模拟对最后一个draggable不起作用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在我给出场景细节之前,让我告诉你js小提琴here.
我有3列div.在第1列中,我有3个带有国家/地区名称的可拖动,第2列有3个空白div的dropable和第3列3个带有城市名称的正常div.因此,在第一列的所有可拖动物落在第二列之后,第二和第三列行将了解乡村与城市的关系.
但问题是在模拟完成后,第一个和第二个可拖动器被丢弃在预期的可投放器上,但第三个可拖动只是粘在鼠标上而不是掉落在投放器上.要查找行为,在上面提到的js小提琴页面加载后,只需将鼠标光标移动到结果部分,您就会看到一个可拖动的鼠标也随之移动.您必须单击某处以使可拖动的坐在可放置或可拖动的部分(取决于您单击的区域).这只发生在Firefox中,而在chrome中,draggable只是随着光标一起移动到适当的可放置部分内部,然后自动进入内部.
我想要的是：与其他可拖动器一样,第三个拖动器不应随着鼠标的移动而移动,并且应该自动坐在所需的可放置物上.
代码说明：
类draggable_div的每个可拖动div都有一个属性data-index(值1,2,3等).对于droppable div(使用class droppable_blank),情况也是如此.现在在JS代码的开头,我有一句话：
answers_found='[1,3]';
这些基本上是来自draggables的数据索引值.值的顺序仅显示当draggables位于droppable上时数据索引值的顺序.在上面提到的情况下,第一个值是1,因此它将是第一个(不是第二个或第三个)可拖动的,它将位于第一个droppable上.类似地,第二和第三可拖动将连续地位于第二和第三可放置.
代码执行以下for循环
for(var i =0; i<answers_found.length; i++){
从answers_found数组中获取每个值.此值是可拖动的数据索引属性值.然后call_trigger_drop函数给出2个参数：
call_trigger_drop(parseInt(answer_found_indiv),droppable_indeX);
第一个是可拖动索引,第二个是相应的可放置索引,即可拖动将位于可放置的索引上.然后使用以下行进行实际模拟：
draggable.simulate("drag",{
dx: dx,dy: dy
});
TL; DR：
第一列中的可拖动模拟被放置在第二列的droppable上,而第三列则只是正常的div.在拖放模拟之后,第3个draggable不会位于Firefox中的第3个droppable上,并随光标移动直到发生单击.如何让它像其他拖动器一样自动坐在droppable上？
编辑：
如果您想将结果作为普通网页而不是js-fiddle,您可以找到here.
console = {}; console.log = function(){}; window.console = console; drag_stop_counter = 0; answers_found = '[3,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 } @R_771_10586@l_answers_found = answers_found.length; @R_771_10586@l_actual_answers_found = 0; for (var i = 0; i < answers_found.length; i++) { if (parseInt(answers_found[i])) { ++@R_771_10586@l_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拖放模拟对最后一个draggable不起作用全部内容，希望文章能够帮你解决jQuery拖放模拟对最后一个draggable不起作用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。