This commit is contained in:
David Martinez 2025-10-22 09:04:17 -06:00
parent 85630e41ca
commit 033d85e792
4 changed files with 22 additions and 12 deletions

View File

@ -49,7 +49,7 @@
</style> </style>
<div class='page-sco py-2 py-md-4 h-100'> <div class='page-sco py-2 py-md-4 h-100'>
<div class='container h-100'> <div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'> <div class='row justify-content-center align-items-center h-100' style="overflow: hidden;">
<div class='col-12'> <div class='col-12'>
<div id="drag-drop-activity" class='row justify-content-center'> <div id="drag-drop-activity" class='row justify-content-center'>
<div class="col-11"> <div class="col-11">
@ -203,7 +203,6 @@
$('.card-drag').draggable({ $('.card-drag').draggable({
revert: 'invalid', revert: 'invalid',
revertDuration: 300, revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing", cursor: "grabbing",
start: function (event, ui) { start: function (event, ui) {
$(this).css('z-index', 1000); $(this).css('z-index', 1000);
@ -211,10 +210,11 @@
ui.position.top = 0; ui.position.top = 0;
}, },
drag: function (event, ui) { drag: function (event, ui) {
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
var changeLeft = ui.position.left - ui.originalPosition.left; var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft; var newLeft = ui.originalPosition.left + changeLeft / scale;
var changeTop = ui.position.top - ui.originalPosition.top; var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop; var newTop = ui.originalPosition.top + changeTop / scale;
ui.position.left = newLeft; ui.position.left = newLeft;
ui.position.top = newTop; ui.position.top = newTop;
}, },

View File

@ -142,6 +142,16 @@
tolerance: 'pointer', tolerance: 'pointer',
helper: "clone", helper: "clone",
cursorAt: { top: 50, left: 50 }, cursorAt: { top: 50, left: 50 },
sort: function (event, ui) {
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
var offset = ui.helper.offset();
var mouseX = event.pageX;
var mouseY = event.pageY;
ui.helper.css({
left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 4,
top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2
});
},
update: function() { update: function() {
checkOrder(); checkOrder();
} }

View File

@ -72,7 +72,7 @@
<div class='page-sco py-2 py-md-0 h-100'> <div class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'> <div class='container h-100'>
<div class='row justify-content-center h-100'> <div class='row justify-content-center h-100'>
<div id="drag-drop-activity" class='col-12 h-100'> <div id="drag-drop-activity" class='col-12 h-100' style="overflow: hidden;">
<div class="content-grid"> <div class="content-grid">
<div class="content-drops w-100 h-100"> <div class="content-drops w-100 h-100">
<div class="row justify-content-center align-items-center h-100"> <div class="row justify-content-center align-items-center h-100">
@ -201,7 +201,6 @@
$newDrag.draggable({ $newDrag.draggable({
revert: 'invalid', revert: 'invalid',
revertDuration: 300, revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing", cursor: "grabbing",
start: function (event, ui) { start: function (event, ui) {
$(this).css('z-index', 1000); $(this).css('z-index', 1000);
@ -209,10 +208,11 @@
ui.position.top = 0; ui.position.top = 0;
}, },
drag: function (event, ui) { drag: function (event, ui) {
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
var changeLeft = ui.position.left - ui.originalPosition.left; var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft; var newLeft = ui.originalPosition.left + changeLeft / scale;
var changeTop = ui.position.top - ui.originalPosition.top; var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop; var newTop = ui.originalPosition.top + changeTop / scale;
ui.position.left = newLeft; ui.position.left = newLeft;
ui.position.top = newTop; ui.position.top = newTop;
}, },

View File

@ -46,7 +46,7 @@
</style> </style>
<div class='page-sco py-2 py-md-0 h-100'> <div class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'> <div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'> <div class='row justify-content-center align-items-center h-100' style="overflow: hidden;">
<div class='col-12'> <div class='col-12'>
<div class='row justify-content-center'> <div class='row justify-content-center'>
<div class="col-10 mb-2"> <div class="col-10 mb-2">
@ -142,7 +142,6 @@
$('.btn-drag').draggable({ $('.btn-drag').draggable({
revert: 'invalid', revert: 'invalid',
revertDuration: 300, revertDuration: 300,
containment: "#drag-drop-activity",
cursor: "grabbing", cursor: "grabbing",
start: function (event, ui) { start: function (event, ui) {
$(this).css('z-index', 1000); $(this).css('z-index', 1000);
@ -150,10 +149,11 @@
ui.position.top = 0; ui.position.top = 0;
}, },
drag: function (event, ui) { drag: function (event, ui) {
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
var changeLeft = ui.position.left - ui.originalPosition.left; var changeLeft = ui.position.left - ui.originalPosition.left;
var newLeft = ui.originalPosition.left + changeLeft; var newLeft = ui.originalPosition.left + changeLeft / scale;
var changeTop = ui.position.top - ui.originalPosition.top; var changeTop = ui.position.top - ui.originalPosition.top;
var newTop = ui.originalPosition.top + changeTop; var newTop = ui.originalPosition.top + changeTop / scale;
ui.position.left = newLeft; ui.position.left = newLeft;
ui.position.top = newTop; ui.position.top = newTop;
}, },