Получение атрибута данных отброшенного объекта в сортируемый div - PullRequest
Новая
       29

Получение атрибута данных отброшенного объекта в сортируемый div

0 голосов
/ 27 сентября 2018

У меня есть список предметов: 

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

Все работает нормально, но мне нужно получить атрибут данных из элемента, чтобы я мог передать его другому сценарию.Но результат атрибута данных продолжает отображаться как «неопределенный».Я не могу понять, что я делаю неправильно.Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Спасибо 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);
        }
    } );        
    //      
} );

Спасибо всем за помощь !!

0 голосов
/ 27 сентября 2018

Проблема в том, что при перетаскивании .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>
...