update
This commit is contained in:
parent
85630e41ca
commit
033d85e792
@ -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;
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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;
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user