improve the sortable widget with direction, tolerance and handle

fix CSS to prevent horizontal scroll
Signed-off-by:Guillaume Martigny <guillaume.martigny@gmail.com>
This commit is contained in:
Guillaume Martigny 2016-02-04 11:53:08 +01:00
parent 20ecfd431b
commit eb02e713e2
2 changed files with 9 additions and 8 deletions

View File

@ -51,7 +51,7 @@
.preview-list { .preview-list {
list-style-type: none; list-style-type: none;
padding-right: 7px; padding-right: 9px;
} }
.add-frame-action { .add-frame-action {
@ -158,13 +158,13 @@
} }
.preview-tile.selected:after { .preview-tile.selected:after {
content: " "; content: "";
position: absolute; position: absolute;
top: 38px; top: 38px;
right: -15px; right: -9px;
border: transparent 4px solid; border: transparent 4px solid;
border-left-color: gold; border-left-color: gold;
border-width: 6px; border-width: 6px 0 6px 6px;
border-style: solid; border-style: solid;
} }
@ -175,7 +175,5 @@
.preview-tile-drop-proxy { .preview-tile-drop-proxy {
border: 3px dashed gold; border: 3px dashed gold;
height: 90px;
border-radius: 9px;
background-color: rgba(255, 215,0, 0.2); background-color: rgba(255, 215,0, 0.2);
} }

View File

@ -124,9 +124,12 @@
ns.FramesListController.prototype.initDragndropBehavior_ = function () { ns.FramesListController.prototype.initDragndropBehavior_ = function () {
$('#preview-list').sortable({ $('#preview-list').sortable({
placeholder: 'preview-tile-drop-proxy', placeholder: 'preview-tile preview-tile-drop-proxy',
update: $.proxy(this.onUpdate_, this), update: $.proxy(this.onUpdate_, this),
items: '.preview-tile' items: '.preview-tile',
axis: 'y',
tolerance: 'pointer',
handle: '.dnd-action'
}); });
$('#preview-list').disableSelection(); $('#preview-list').disableSelection();
}; };