I have a couple of problems in jQuery UI. My webpage is divided into columns and I want to drag and drop tickets between columns.
My HTML of tickets is:
<div class="panel panel-default col-md-2" style="height: 840px; padding-right: 0;padding-left: 0;">
<div class="panel-heading">Submitted<span id="sub" class="badge" style="float: right;">{{sub}}</span></div>
<div id="submitted" class="panel-body" style="width: 100%; margin:0 auto; padding: 5px 0px 0px 0px;">
<ul class="ui-sortable-handle droppable snapper" style="width: 100%;height: 840px; padding-left: 0;">
<li class="ui-draggable" style="width: 100%; padding-left: 0; z-index: 99" ng-repeat="ticket in sub_tickets">
<div class="panel panel-info" ng-controller="ticketController">
<div class="panel-heading clearfix" style="margin-bottom: 5px;">
<button class="btn btn-xs pull-left"><span id="label" class="glyphicon glyphicon-pencil"></span></button><h4 class="panel-title pull-right">{{ticket.title}}</h4>
</div>
<div class="panel-body" ng-bind-html="ticket_message">{{ticket.message}}</div>
</div>
</li>
</ul>
</div>
</div>
and JS:
$(".ui-sortable-handle").sortable({
appendTo: document.body,
placeholder:"ui-state-highlight"
});
$(".droppable").droppable({
activeClass: "ui-state-default",
hoverClass:"ui-state-hover"
});
$(".ui-draggable").draggable({
connectToSortable: ".ui-sortable-handle",
containment: "window",
cursor: "move",
zIndex: 100,
snap: ".droppable"
});
My problems are: 1. When I use placeholder, all columns are highlighted, not just piece where ticket will be dropped. Also placeholder is just one orange line, not square as it should be.
Because tickets are added dynamically, only on first ticket in column (which is bootstrap panel) I can drag header and content separately, not whole panel. All other tickets I can normally drag as a whole.
When ticket is dropped in next column, it's snapped to the bottom of the first ticket, and I want to have 5px of space between them.
Thanks for answers
