Sortable draggable with jQuery problem

@Zlobniy wrote:

Hello, I’m a new in ember and have problem.

Image may be NSFW.
Clik here to view.

After sorting i’ll try to add new item between item 1 and item 2, but they rendered in not expected place.

What i’m doing wrong?

ember version is 2.16

Thank you!

Component

export default Component.extend( {
items: [],
sortedData: Ember.computed.sort( 'items', 'sortDefinition' ),
sortDefinition: ['index'],
init: function () {
this._super( ...arguments );

let array = [];
let object1 = {id: 1, index: 1, title: "item 1"};
let object2 = {id: 2, index: 2, title: "item 2"};
let object3 = {id: 3, index: 3, title: "item 3"};

array.pushObject( Ember.Object.create( object1 ) );
array.pushObject( Ember.Object.create( object2 ) );
array.pushObject( Ember.Object.create( object3 ) );

this.get( 'items' ).setObjects( array );
},
didInsertElement() {
let component = this;
let invalid = false;
Ember.$( '.sortable-view' ).sortable( {
  update: function ( e, ui ) {
    let indices = {};
    $( this ).children().each( ( index, item ) => {
      indices[$( item ).attr( 'item-id' )] = index + 1;
    } );
    component.updateSortedOrder( indices );
  }
 } );

  Ember.$( '.draggable-area' ).draggable( {
  connectToSortable: ".sortable-view",
  helper: function () {
    var object = jQuery( this ).clone();
    object.width( jQuery( this ).width() );
    object.height( jQuery( this ).height() );
    return object;
  },
  revert: function ( socketObj ) {
    if ( socketObj ) {
      invalid = false;
      return false;
    }
    else {
      invalid = true;
      return true;
    }
  },
  stop: function ( event, ui ) {
    if ( !invalid ) {
      var currentPosition = 0;
      $( Ember.$( '.sortable-view' ) ).children().each( ( index, item ) => {
        if ( $( item ).hasClass( 'draggable-area' ) ) {
          currentPosition = index;
        }
      } );
      Ember.$( ui.helper ).remove();

      component.createNew( currentPosition );
    }
  }
} );
Ember.$( '.sortable-view' ).disableSelection();
},
updateSortedOrder( indices ) {
this.beginPropertyChanges();
let tracks = this.get( 'items' ).forEach( ( item ) => {
  var index = indices[item.get( 'id' )];
  if ( item.get( 'index' ) !== index ) {
    item.set( 'index', index );
  }
 } );
 this.endPropertyChanges();
 },
actions: {
add: function () {
  this.createNew( this.get( 'items' ).length );
},
test() {
  console.log( 'items:' );
  this.get( 'items' ).forEach( ( item ) => {
    console.log( item.get( 'id' ) + " - " + item.get( 'index' ) + " - " + item.get( 'title' ) );
  } );
  console.log( 'sortedData:' );
  this.get( 'sortedData' ).forEach( ( item ) => {
    console.log( item.get( 'id' ) + " - " + item.get( 'index' ) + " - " + item.get( 'title' ) );
  } );
}
},
createNew( position ) {
let id = this.get( 'items' ).length + 1;
if ( this.get( 'items' ).length === position ) {
  this.get( 'items' ).pushObject( Ember.Object.create( {id: id, index: position, title: 'created item ' + id} ) );
} else {
  this.get( 'items' ).insertAt( position, Ember.Object.create( {
    id: id,
    index: position + 1,
    title: 'created item ' + id
  } ) );
}

},
} );

template

  <div>
  Draggable:
 <div style="margin: 10px" class="draggable-area">
 <div>Item</div>
 </div>
 Sortable view:
 <div style="margin: 10px" class="sortable-view">
  {{#each sortedData as |item|}}
    <div item-id="{{item.id}}">{{item.title}}</div>
  {{/each}}
</div>
<button type="button" {{action 'add'}}>Add</button>
<button type="button" {{action 'test'}}>Test</button>
</div>

Posts: 1

Participants: 1

Read full topic