将放置对象的数据属性放入可排序的 div答案

【问题标题】：Getting the data attribute of dropped object into a sortable div将放置对象的数据属性放入可排序的 div
【发布时间】：2018-09-26 22:04:13
【问题描述】：

我有一个物品清单：

<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 );
        }
    } );        
    //      
} );

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

【问题讨论】：

欢迎。试试$(ui.item).data('itemtype')。 addClass 行也是如此。 $(event.currentTarget).data('itemtype') 也可能有效。不过对 jQuery UI 不太熟悉。
抱歉 - 两者都不起作用。 ui.item.addClass('block');但是确实有效。

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案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>

【讨论】：

这很有意义。我仍然遇到定位可拖动元素的问题。如果我有三个可拖动对象，我就无法定位特定的一个。

【解决方案2】：

感谢 Obsidian - 你让我走上了正轨。意识到我必须在拖动过程中重新添加数据属性，然后我可以在数据下降时访问数据。

我的解决方案：

$( 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);
        }
    } );        
    //      
} );

感谢大家的帮助！！

【讨论】：

【解决方案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

希望这对将来的人有所帮助。

【讨论】：