jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable

La simulación de arrastrar y soltar de jQuery no funciona para el último elemento que se puede arrastrar



jquery-ui drag-and-drop (1)

Estoy tratando de simular la simulación de arrastrar y soltar utilizando el complemento jquery-simulate-ext de jquery-ui .

Antes de dar los detalles del escenario, permítame mostrarle el violín de js here .

Tengo 3 columnas de divs . En la 1ª columna, tengo 3 draggables con nombres de países, en la 2ª columna 3 droppables de divs en blanco y en la 3ª columna 3 divs normales con nombres de ciudades. Así que después de que todos los draggables de la 1ª columna se suelten en la segunda columna, las filas de la 2ª y la 3ª columna darán un sentido a la relación país-ciudad.

Pero el problema es después de que se realiza la simulación, los draggables primero y segundo se sueltan en los droppables esperados, pero el tercer dragable solo se pega al mouse en lugar de soltar el droppable. Para encontrar el comportamiento, después de que se cargue la página js fiddle mencionada anteriormente, simplemente mueva el cursor del mouse sobre la sección de resultados y verá que un elemento que se puede arrastrar también se mueve junto con el mouse. Debe hacer clic en algún lugar para que el elemento arrastre se sitúe en la sección que se puede soltar o arrastrar (depende de la zona en la que haga clic). Esto sucede solo en Firefox, mientras que en Chrome , el elemento que se puede arrastrar solo se mueve junto con el cursor solo dentro de la sección apropiada para colocar y se coloca dentro de ella automáticamente.

Lo que quiero es: al igual que con otros draggables, el 3er dragable no debe moverse junto con el movimiento del mouse y debe sentarse automáticamente en el dropable deseado.

Explicación del código:

Cada div draggable con clase draggable_div tiene un atributo data-index (valor 1,2,3, etc.). El mismo escenario es cierto con los divs (con la clase droppable_blank ). Ahora al comienzo del código JS, tengo la línea:

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

Estos son básicamente los valores del data-index de los draggables. El orden de los valores solo muestra el orden de los valores de data-index de los draggables cuando se sientan en los droppables. En el caso mencionado, el primer valor es 1, por lo que será el primero que se pueda arrastrar (no el 2 ° o el 3 °) que se ubicará en el primer elemento que se puede soltar. De manera similar, el segundo y tercer draggable se ubicarán en el segundo y tercer droppables consecutivamente.

El código ejecuta lo siguiente for bucle.

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

para obtener cada uno de los valores de la matriz answers_found . Este valor es el valor del atributo de data-index arrastrar. Entonces a la función call_trigger_drop se le dan 2 parámetros:

call_trigger_drop(parseInt(answer_found_indiv),droppable_index);

El primero es el índice arrastrable y el segundo es el índice dropable correspondiente, es decir, el dragable se ubicará en el dropable. La simulación real tiene lugar con las siguientes líneas entonces:

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

TL; DR:

Los draggables de la 1ª columna se simulan para caer sobre los droppables en la 2ª columna, mientras que la 3ª columna es solo de div s normales. Después de la simulación de arrastrar y soltar, el 3er draggable no se sienta en el 3er dropable de Firefox y se mueve junto con el cursor hasta que se produce un clic. ¿Cómo hacer que se asiente en el droppable automáticamente como otros draggables?

EDITAR:
Si desea obtener el resultado como una página web normal en lugar de js-fiddle, puede encontrarlo 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-->


es porque simula un evento de drag solo sin drop , use drag-n-drop lugar.

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