Question

我有一个物品清单：

<div class='item' data-itemtype="title">Title</div>

我想放入可排序的div中。

<div class="content"></div>

我正在使用以下代码：

$( document ).ready( function () {
    $( '.item' ).draggable( {
        helper: function ( e ) {
            return $( '<div>' ).addClass( 'block' ).text( $( e.target ).text() );
        },
        connectToSortable: ".content",
        opacity: .8,
    } );
    ///     
    $( '.content' ).sortable( {
        placeholder: 'block-placeholder',
        update: function ( event, ui ) {
            // turn the dragged item into a "block"
            ui.item.addClass( 'block' );
            var itemtype = ui.item.data('itemtype');
            alert( 'this: '+itemtype );
        }
    } );        
    //      
} );

一切正常，但是我需要从项目中获取数据属性，以便可以将其传递给另一个脚本。但是data属性的结果不断出现“未定义”。我不知道我在做什么错。感谢您的帮助。

Answer 1

问题在于，当您将.item拖动到.content中时，.content内的新元素不包含data-itemtype属性。要定位此属性，您需要直接使用var itemtype = $('.item').data('itemtype')之类的元素来引用该元素。

这可以在下面看到：

$(document).ready(function() {
  $('.item').draggable({
    helper: function(e) {
      return $('<div>').addClass('block').text($(e.target).text());
    },
    connectToSortable: ".content",
    opacity: .8,
  });
  ///     
  $('.content').sortable({
    placeholder: 'block-placeholder',
    update: function(event, ui) {
      // turn the dragged item into a "block"
      ui.item.addClass('block');
      var itemtype = $('.item').data('itemtype');
      alert('this: ' + itemtype);
    }
  });
  //      
});

.item, .content {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class='item' data-itemtype="title">Title</div>
<div class="content"></div>

或者，您需要在元素复制时将属性添加到元素中，例如使用$(ui.item).attr('data-itemtype', $('.item').data('itemtype'))：

$(document).ready(function() {
  $('.item').draggable({
    helper: function(e) {
      return $('<div>').addClass('block').text($(e.target).text());
    },
    connectToSortable: ".content",
    opacity: .8,
  });
  ///     
  $('.content').sortable({
    placeholder: 'block-placeholder',
    update: function(event, ui) {
      // turn the dragged item into a "block"
      ui.item.addClass('block');
      $(ui.item).attr('data-itemtype', $('.item').data('itemtype'));
      var itemtype = ui.item.data('itemtype');
      alert('this: ' + itemtype);
    }
  });
  //      
});

.item, .content {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class='item' data-itemtype="title">Title</div>
<div class="content"></div>

Answer 2

感谢黑曜石-您使我走上了正轨。意识到我必须在拖动过程中重新添加data属性，然后在拖放时可以访问数据。

我的解决方案：

$( document ).ready( function () {
    $( '.item' ).draggable( {
        helper: function ( e ) {    
            var itemvar = $(this).data('itemtype');
            return $('<div data-itemtype="'+itemvar+'">').addClass('block').text($(e.target).text());
        },
        connectToSortable: ".content",
        opacity: .8,
    } );
    ///     
    $( '.content' ).sortable( {
        placeholder: 'block-placeholder',
        update: function ( event, ui ) {
            // turn the dragged item into a "block"
            ui.item.addClass( 'block' );
            $(ui.item).attr('data-itemtype', $(this).data('itemtype'));
            var itemtype = ui.item.data('itemtype');
            alert('this: ' + itemtype);
        }
    } );        
    //      
} );

谢谢大家的帮助！

Answer 3

这就是我能够解决这个问题的方式

HTML

@foreach($categories as $data)
  <tr class="sortme">
     <td> {{ $data->category_name }} </td>
     <td> {!! \Str::limit($data->category_description, 50, ' ...')  !!} </td>
     <td> {{ count( $data->products ) }} Product/s</td>
     <td>
       <a class="btn btn-info btn-xs" href="{{ route('category.edit', $data->id) }}"> View/Edit </a>
     </td>
  </tr>
@endforeach

jQueryUI

$( "tbody" ).sortable({
    items : '.sortme',
    start   : function(event, ui) {
        $(this).attr('data-currentindex', ui.item.index());
    },
    update : function (event, ui) {
        var current_position    = $(this).attr('data-currentindex'),
            category_to_move    = ui.item[0].dataset.category_id,
            desired_position    = ui.item.index();

        console.log( ui.item[0].dataset.category_id );

        $.ajax({
          // my ajax stuff
        })
    }
});

基本上，我浏览了ui.item

希望这对以后的人有帮助。

将放置的对象的data属性获取到可排序的div中

3 个答案:

HTML

jQueryUI