JQuery Sortable - Замена элементов, а не замена элементов

Есть ли настраиваемый вариант для достижения такой функции, как замена элементов списка, а не замена элементов в JQuery Sortable UI. Текущая функция похожа на Item1 Swaps с Item2 и наоборот. Мне нужна такая функция, как: Если item2 перетаскивается и кланяется на Item1, item2 должен заменить Item1, а позиция Item2 будет пуста. Любая помощь? Благодарю.JQuery Sortable - Замена элементов, а не замена элементов

источник

2012-04-24 Kishan Kanugula

Вы всегда можете связать с драг/событий падения и обрабатывать его самостоятельно ... –

Вы, наверное, было бы лучше использовать перетаскивание и Выбрасывается, а не сортируется. – Rob

@Brad Christie: Я не мог найти никаких событий драпировки/перетаскивания для Jquery Sortable в документации. Можете ли вы кратко объяснить плз. Спасибо –

Хийя демоhttp://jsfiddle.net/CZm9C/2/

Теперь перетащите из первой коробки во вторую. Надеюсь, что это помогает, и, пожалуйста, дайте мне знать, если я пропустил что-нибудь, :)

Jquery

$(document).ready(function(){ 
    $(".leftDiv .item").draggable({ 
     helper: function(ev, ui) { 
      return "<span class='helperPick'>"+$(this).html()+"</span>"; 
     }, 
     connectToSortable: ".rightDiv" 
    }); 

    $(".rightDiv").sortable({ 
     'items': ".item", 
     'receive': function(event, ui){ 
      // find the class of the dropped ui, look for the one with the integer suffix. 
      var clazz = getClassNameWithNumberSuffix(ui.item); 
      $('.leftDiv .' + clazz).draggable("option", "revert", true) 
      if($('.rightDiv .' + clazz).length > 1){ 
       $('.rightDiv .' + clazz + ':not(:first)').remove();  

      } 
      $('.leftDiv .' + clazz).remove(); 
     } 
    }); 

}); 

function getClassNameWithNumberSuffix(el) { 
    var className = null; 
    var regexp = /\w+\d+/; 
    $($(el).attr('class').split(' ')).each(function() { 
    if (regexp.test(this)) { 
     className = this; 
     return false; 
    } 
    }); 

    return className; 
}

HTML

<div class="leftDiv"> drag to ==> 
    <div class="item item1">Item 1</div> 
    <div class="item item2">Item 2</div> 
    <div class="item item3">Item 3</div> 
    <div class="item item4">Item 4</div> 
    <div class="item item5">Item 5</div> 
    <div class="item item6">Item 6</div> 
</div> 
<div class="rightDiv"> ==> To this 
    <div class="item item1">Item 1</div> 
    <div class="item item2">Item 2</div> 
    <div class="item item3">Item 3</div> 
    <div class="item item4">Item 4</div> 
    <div class="item item5">Item 5</div> 
    <div class="item item6">Item 6</div> 
</div>

CSS

.leftDiv, .rightDiv {width:120px; float:left; border:1px solid #000; padding:5px; margin:10px; min-height:130px} 
.rightDiv {margin-left:40px} 

.item {height:20px; line-height:20px; text-align:center; border:1px solid #EEE; background-color:#FFF} 

.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}

источник

2012-04-24 04:39:48

Спасибо за ваш код и помощь. Я действительно смотрю эту функцию в Sortable, а не перетаскивает из перетаскиваемого элемента, связанного со списком Sortable. Я смог скрыть местозаполнитель и почувствовать замену, но, к сожалению, я не могу идентифицировать индекс места падения, чтобы заменить. Из-за отказа, для меня метод получения сам не звонит. Благодарю. –

Вы можете сделать это с помощью следующего кода:

$('#container').sortable({ 
    connectWith: '#container', 
    items: '.children', //#container > .children 
    cursor: 'move', 
    receive: function(event, ui) { 
    var item = $(ui.item); 
    var sender = $(ui.sender); 
    sender.append(item.siblings('.children')); 
    } 
});

источник

2012-11-26 04:06:02

JQuery Sortable - Замена элементов, а не замена элементов

ответ

Смежные вопросы