Javascript 角度拖拽：如何在物品被拖拽后清空拖拽区域？

情况：

<tr ng-repeat="item in list_items track by $index">

     <td>
        <span data-drag="true" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index: {{$index}}, onStart:'set_item_id_to_drag({mail_id: email.mail_id})'}">
        <a > {{item.name}} </a>
        </span>
    </td>

 </tr>

<span data-drop="true" data-jqyoui-options jqyoui-droppable="{onDrop:'email_dragged_delete()'}">
    BIN
</span>


$scope.email_dragged_delete = function( event, ui )
{
   var item_id = $rootScope.item_id_to_drag.item_id;
    $http({

        url: base_url + 'api/item_delete',
        data: { item_id: item_id },
        method: "POST",

     }).success(function (data) {

        delete $rootScope.email_id_to_drag;

        var result = ItemsService.list_items( $stateParams.mail_account_id );
        result.then( function( data ) {

            $rootScope.list_items = data;

        });

     });

}

$scope.set_item_id_to_drag = function( event, ui, item_id )
{
    $rootScope.item_id_to_drag = item_id;
}

大家好。在我的应用程序中，我有一个表中显示的项目列表

我使用能够将这些项目拖到垃圾箱并删除它们

一切正常：在我将项目放到垃圾箱上之后，函数被触发，项目被删除

但有一个问题：删除项目后，项目列表会刷新。但发生的情况是，一个项目仍然在下降区。由于删除的项目不属于列表的一部分，以下项目将取代它。

此项目应显示在列表中，而不是放置区域上方

代码：

<tr ng-repeat="item in list_items track by $index">

     <td>
        <span data-drag="true" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index: {{$index}}, onStart:'set_item_id_to_drag({mail_id: email.mail_id})'}">
        <a > {{item.name}} </a>
        </span>
    </td>

 </tr>

<span data-drop="true" data-jqyoui-options jqyoui-droppable="{onDrop:'email_dragged_delete()'}">
    BIN
</span>


$scope.email_dragged_delete = function( event, ui )
{
   var item_id = $rootScope.item_id_to_drag.item_id;
    $http({

        url: base_url + 'api/item_delete',
        data: { item_id: item_id },
        method: "POST",

     }).success(function (data) {

        delete $rootScope.email_id_to_drag;

        var result = ItemsService.list_items( $stateParams.mail_account_id );
        result.then( function( data ) {

            $rootScope.list_items = data;

        });

     });

}

$scope.set_item_id_to_drag = function( event, ui, item_id )
{
    $rootScope.item_id_to_drag = item_id;
}

{{item.name}
箱子
$scope.email\u draugd\u delete=函数（事件，用户界面）
{
var item_id=$rootScope.item_id_to_drag.item_id；
$http({
url:base_url+“api/item_delete”，
数据：{item_id:item_id}，
方法：“张贴”，
}).成功（功能（数据）{
删除$rootScope.email\u id\u以拖动；
var result=ItemsService.list_items（$stateParams.mail_account_id）；
结果。然后（函数（数据）{
$rootScope.list_items=数据；
});
});
}
$scope.set_item_id_to_drag=函数（事件、ui、item_id）
{
$rootScope.item\u id\u to\u drag=item\u id；
}

问题：

<tr ng-repeat="item in list_items track by $index">

     <td>
        <span data-drag="true" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index: {{$index}}, onStart:'set_item_id_to_drag({mail_id: email.mail_id})'}">
        <a > {{item.name}} </a>
        </span>
    </td>

 </tr>

<span data-drop="true" data-jqyoui-options jqyoui-droppable="{onDrop:'email_dragged_delete()'}">
    BIN
</span>


$scope.email_dragged_delete = function( event, ui )
{
   var item_id = $rootScope.item_id_to_drag.item_id;
    $http({

        url: base_url + 'api/item_delete',
        data: { item_id: item_id },
        method: "POST",

     }).success(function (data) {

        delete $rootScope.email_id_to_drag;

        var result = ItemsService.list_items( $stateParams.mail_account_id );
        result.then( function( data ) {

            $rootScope.list_items = data;

        });

     });

}

$scope.set_item_id_to_drag = function( event, ui, item_id )
{
    $rootScope.item_id_to_drag = item_id;
}

拖动元素并触发事件后，是否可以清空放置区域？ 为了避免列表中的另一个元素取代它

---

多谢各位

您能在JSFIDLE或Plunkr上创建一个演示吗？但是我没有正确地理解它。您是否尝试过

jqyoui draggable=“{index:{{$index}}，占位符：true}