U4-5793 prevent drag element off screen vertically

This commit is contained in:
antoine
2014-11-13 21:28:06 +01:00
parent 5c17201006
commit 656ba98b1b
2 changed files with 28 additions and 4 deletions

View File

@@ -10,8 +10,9 @@
// Sortabel
// -------------------------
.usky-grid .ui-sortable-helper {
position:absolute;
position:absolute !important;
border: dashed 1px #000 !important;
background: #ccc;
opacity: 0.4;
@@ -44,8 +45,9 @@
text-align: center;
font-size: 85px;
line-height: 65px;
color: @grayLighter;
color: @gray;
vertical-align: middle;
background-color:@grayLighter;
}
.usky-grid .ui-sortable-placeholder:hover{
@@ -138,6 +140,7 @@
.usky-grid .usky-cell{
position: relative;
border: 1px dashed rgba(0,0,0,0);
min-height:127px;
}
.usky-grid .cell-tools {

View File

@@ -28,6 +28,17 @@ angular.module("umbraco")
left: 90
},
sort: function (event, ui) {
/* prevent vertical scroll out of the screen */
var max = $(".usky-grid").width() - 150;
if (parseInt(ui.helper.css('left')) > max) {
ui.helper.css({ 'left': max + "px" })
}
if (parseInt(ui.helper.css('left')) < 20) {
ui.helper.css({ 'left': 20 })
}
},
start: function (e, ui) {
ui.item.find('.mceNoEditor').each(function () {
tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
@@ -46,7 +57,6 @@ angular.module("umbraco")
var cancelMove = false;
$scope.sortableOptionsCell = {
distance: 10,
cursor: "move",
placeholder: "ui-sortable-placeholder",
@@ -61,6 +71,18 @@ angular.module("umbraco")
left: 90
},
sort: function (event, ui) {
/* prevent vertical scroll out of the screen */
var position = parseInt(ui.item.parent().offset().left) + parseInt(ui.helper.css('left')) - parseInt($(".usky-grid").offset().left);
var max = $(".usky-grid").width() - 220;
if (position > max) {
ui.helper.css({ 'left': max - parseInt(ui.item.parent().offset().left) + parseInt($(".usky-grid").offset().left) + "px" })
}
if (position < 0) {
ui.helper.css({ 'left': 0 - parseInt(ui.item.parent().offset().left) + parseInt($(".usky-grid").offset().left) + "px" })
}
},
over: function (event, ui) {
allowedEditors = $(event.target).scope().area.allowed;
@@ -527,7 +549,6 @@ angular.module("umbraco")
};
// *********************************************
// Init control
// *********************************************