Question

我在jQuery UI中遇到了一些问题。我的网页分为列，我想在列之间拖放票证。

我的门票HTML是：

<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>

和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"
});

我的问题是： 1.当我使用占位符时，所有列都会突出显示，而不仅仅是要删除票证的部分。占位符只是一条橙色线，不应该是正方形。

因为票证是动态添加的，所以只在列中的第一张票证（这是引导程序面板）上我可以单独拖动页眉和内容，而不是整个面板。我通常可以拖动所有其他门票。
当下一栏中的故障单被删除时，它会被捕捉到第一张故障单的底部，我希望它们之间有5px的空间。

感谢您的回答

在jQuery UI中拖放的问题

0 个答案: