Question

我确定此功能已作为jQuery插件存在。

我们想要创建一个＆＃34;转移＆＃34;控制，如this。我有两个文本框，我想在两个通过按钮之间传输数据。

我在我的网络应用程序中大量使用Backbone.js。

我可以通过Backbone视图+集合来做到这一点，或者我可以编写一个jQuery插件来处理这个问题。如果我编写一个jQuery插件，我可能会在Backbone视图中与它进行交互以模块化。

Answer 1

这可以通过一个非常简单的jQuery函数来完成：

$('.transfer').on('click',function(){
    $($(this).data('from'))
        .find(':selected')
        .remove()
        .appendTo($(this).data('to'))
        .prop('selected',false);
});

假设以下HTML：

<select id="one" multiple>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
</select>
<select id="two" multiple></select>

<button class="transfer" data-from="#one" data-to="#two">&raquo;</button>
<button class="transfer" data-from="#two" data-to="#one">&laquo;</button>

--- jsFiddle DEMO ---

你可以创建一个小的jQuery插件，给它两个select元素，让它创建传输按钮和功能，但它也可以作为一个功能。使用插件，您还可以添加更复杂的功能，例如在option元素来回移动时保持原始顺序。

Answer 2

您可以使用jQuery-UI droppable：http://jqueryui.com/demos/droppable/#propagation

在drop事件中，您可能希望查看已删除的元素并从前一个集合执行Backbone .remove，并将.add执行到接收集合：

// Store a unique id of each item on the corresponding DOM element.
// ex. <div data-id="4129"></div>

$( ".selector" ).bind( "drop", function(event, ui) {
  // Look at the id and do a Collection.where() call to retrieve a reference to it.
  // Perform the .remove and the .add with that reference.
});

使用Backbone或为此编写一个jQuery插件......或两者兼而有之？

2 个答案: