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});