Wie können Sie Objekte in einen externen Container ziehen und ablegen?

Grundsätzlich habe ich das folgende Markup:Wie können Sie Objekte in einen externen Container ziehen und ablegen?

<script> 
    $(function() { 
     $('.box').on('mousedown', function(e) { 
      console.log(e); 
     }); 
    }); 
</script> 

<body ng-controller="MainCtrl"> 
    <ul ui-sortable="sortableOptions" ng-model="list"> 
     <li draggable ng-repeat="item in list">Item: {{item}}</li> 
    </ul> 
    <div class="boxes"> 
     Drop to external area: <br/><br/> 
     <div class="box" style="background: red;"></div> 
     <div class="box" style="background: yellow;"></div> 
     <div class="box" style="background: orange;"></div> 
    </div> 
</body>

Fiddle: http://plnkr.co/edit/xKw6sSbymA5M8R2v4OGF?p=preview

Nun, ich möchte Container ziehen zu können und Drop-Elemente aus der Liste zu diesem "extern".

Wenn der Benutzer „Tropfen“ Artikel zu einem farbigen Flächen, ich will dieses Ereignis wissen, nur passiert ist und welches Element beeinflusst wird, als auch

Bereits für mousedown/mouseup Ereignisse zu hören versucht, auf jedem .box Element, aber es funktioniert nicht wie erwartet.

Quelle

2016-07-13 vitozev

Sie müssen das Drop-Ereignis auf dem externen Zielcontainer abfangen. – Leng

Ich habe eine [feature request] (https://bugs.jqueryui.com/ticket/10628) für diese 2 Jahre zurück ohne Glück ... –

Die von Ihnen verwendete Bibliothek ist eine Sortierbibliothek. Sie müssen hierfür die Drag-Drop-Bibliothek verwenden.

Zum Beispiel können Sie https://github.com/codef0rmer/angular-dragdrop

Siehe die Dokumentation für alle verfügbaren Ereignisrückrufe nutzen.

Kopieren des Beispiel-Code-Snippet direkt (als Referenz-Check here),

HTML:

<ul class="thumbnails"> 
    <li style='margin-left:10px;' ng-repeat="item in list1"> 
     <div class="btn" 
      data-drop="true" 
      ng-model='list1' 
      jqyoui-droppable="{index: {{$index}}}"> 

      <div class="btn btn-info" 
       ng-show="item.title" 
       data-drag="{{item.drag}}" 
       data-jqyoui-options="{revert: 'invalid'}" 
       ng-model="list1" 
       jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}"> 
       {{item.title}} 
      </div> 

     </div> 
    </li> 
</ul> 

<div class="container form-inline" style="text-align: center;"> 
    <div class="btn" 
     ng-repeat="item in list2 | orderBy : 'title'" 
     data-drop="true" 
     ng-model='list2' 
     jqyoui-droppable="{index: {{$index}}, applyFilter: 'filterIt'}"> 

     <div class="btn btn-info" 
      data-drag="{{item.drag}}" 
      data-jqyoui-options="{revert: 'invalid'}" 
      ng-model="list2" 
      jqyoui-draggable="{index: {{$index}},animate:true, applyFilter: 'filterIt'}" 
      ng-hide="!item.title"> 
      {{item.title}} 
     </div> 

    </div> 
</div>

Controller:

App.controller('YourCtrl', function($scope, $filter) { 
    $scope.filterIt = function() { 
     return $filter('orderBy')($scope.list2, 'title'); 
    }; 
    $scope.list1 = []; 
    $scope.list2 = [ 
     { 'title': 'Item 3', 'drag': true }, 
     { 'title': 'Item 2', 'drag': true }, 
     { 'title': 'Item 1', 'drag': true }, 
     { 'title': 'Item 4', 'drag': true } 
    ]; 
    angular.forEach($scope.list2, function(val, key) { 
     $scope.list1.push({}); 
    }); 
});

Hoffnung das Ihr Problem löst.

Quelle

2016-07-13 18:29:00 Chinni

Vielen Dank! Das Problem ist, dass ich diese Sortierfunktion brauche, deshalb wird sie benutzt. – vitozev

Ich sehe. Dann könnten Sie wahrscheinlich http://marceljuenemann.github.io/angular-drag-and-droplists/demo/#/nested überprüfen? – Chinni

-1

Versuchen Sie, den 'mousedown' durch 'drop' zu ersetzen.

Quelle

2016-07-13 18:06:31 Leng

Wie können Sie Objekte in einen externen Container ziehen und ablegen?

Antwort

Verwandte Themen