Я пытаюсь смоделировать имитацию перетаскивания, используя jquery-simulate-ext плагин jquery-ui .
Прежде чем дать подробностиСценарий, позвольте мне показать вам js fiddle здесь .
У меня есть 3 столбца divs.В 1-м столбце у меня есть 3 перетаскиваемых объекта с названиями стран, во 2-м столбце - 3 сбрасываемых пустых divs и в 3-м столбце 3 обычные div с названиями городов.Таким образом, после того, как все перетаскиваемые объекты из 1-го столбца будут удалены во 2-м столбце, во 2-м и 3-м строках столбца будет отображаться отношение страны к городу.
Но проблема заключается в после завершения моделирования1-й и 2-й перетаскиваемые объекты выпадают на ожидаемых объектах сбрасывания, но третий перетаскиваемый объект просто прилипает к мыши вместо того, чтобы опускаться на объект сбрасывания.Чтобы найти такое поведение, после загрузки упомянутой выше страницы js-скрипки просто наведите курсор мыши на раздел результатов, и вы увидите, что перетаскиваемый элемент также перемещается вместе с мышью.Вы должны щелкнуть где-нибудь, чтобы перетаскиваемый элемент находился в области перетаскивания или перетаскивания (зависит от того, в какой области вы щелкаете).Это происходит только в Firefox , тогда как в chrome , перетаскиваемый объект перемещается вместе с курсором только внутри соответствующего фрагмента, который можно сбросить, а затем автоматически помещается в него.
То, что я хочу, это: Как и в случае с другими перетаскиваемыми объектами, 3-й перетаскиваемый элемент не должен двигаться вместе с движением мыши и должен автоматически садиться на нужную опускаемую кнопку.
Объяснение кода:
Каждый перетаскиваемый div с классом draggable_div имеет атрибут data-index (значение 1,2,3 и т. Д.).Тот же сценарий верен с divs (с классом droppable_blank).Теперь в начале кода JS у меня есть строка:
answers_found='[1,2,3]';
В основном это значения data-index от перетаскиваемых объектов.Порядок значений просто показывает порядок значений data-index перетаскиваемых объектов, когда они располагаются на отсеиваемых объектах.В упомянутом случае первое значение равно 1, поэтому это будет первое (не второе или третье) перетаскиваемое, которое будет располагаться на первом сбрасываемом элементе.Аналогично, 2-й и 3-й перетаскиваемые объекты будут последовательно размещаться на 2-м и 3-м предметах.
Код выполняет следующий цикл 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);
1-й является перетаскиваемым индексом, а 2-й является соответствующим индексом сбрасывания, т. Е. Перетаскиваемый будет находиться на опускании.Фактическое моделирование выполняется с помощью следующих строк:
draggable.simulate("drag", {
dx: dx,
dy: dy
});
TL; DR:
Перетаскиваемые объекты из 1-го столбца моделируются так, что они сбрасываются на элементы сброса на2-й столбец, в то время как 3-й столбец просто нормальный div с.После имитации перетаскивания 3-й перетаскиваемый объект не помещается на 3-й элемент перетаскивания в Firefox и перемещается вместе с курсором, пока не произойдет щелчок. Как сделать так, чтобы он автоматически садился на буксирное поле, как другие перетаскиваемые объекты?
РЕДАКТИРОВАТЬ:
Если вы хотите получить результат в виде обычной веб-страницы вместоjs-fiddle, вы можете найти это здесь .
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-->