从外部敲打可排序 [英] Knockout sortable drag and drop from outside
问题描述
我在webapp中有一个很大的视图。左边有一个产品列表，右边是一个类别列表。产品应该在类别中拖动。
产品列表是observableArray。现在，当列表超过1000个条目时，我们会遇到性能问题（尤其是IE）。所以导致产品本身没有改变，我们把它们从淘汰绑定中，将它们连接成一个字符串，并且只附加一个节点。现在当然，排序排序的绑定不再工作了...
这是类别的模板：
< div data-bind =sortable：{data：Products，beforeMove：$ root.verifyProducts}，attr：{'data-max'：MaxProducts}>
< div class =menuEditTab2CatDragItem clearfixdata-bind =attr：{'data-prodid'：Id}>
< div class =menuEditTab3ProdsNameTextdata-bind =text：Name>< / div>
< div class =pull-rightstyle =margin-left：8px;>< i style =margin-top：-4px; class =icon-removedata-bind =click：$ parent.removeProduct>< / i>
< / div>
< div class =pull-left menuEditTab3ProdsIdText> ID：< span data-bind =text：Id>< / span>
< / div>
< / div>
这里是js代码对于左侧的产品列表：
function fillAllProductsTab（）{
var parts ='';
allProducts.forEach（function（item）{
parts + ='< div id =f_all_'+ item.Id +'>'+ // draggable ={data：$ data ，选项：{containment：\'\＃menuEditTab3Ce\'，revert：\'invalid\'}}
'< div class =menuEditTab2CatDragItem>'+
'< div>'+ item.Name +'< / div>< div class =clearfix menuEditTab3ProdsIdText>'+
'< div class =pull-left> ID：< ; span>'+ item.Id +'< / span>< / div>< div class =pull-right>'+
'< span>'+ item.Price + < / span>€< / div>< / div>< / div>< / div>';
}）;
$（＃allp）。append（parts）;
};
现在我的想法是我可以手动启动产品列表中的draggable插件，然后附加它们： p>
$（'＃allp> div'）。draggable（{
// connectToSortable：'#sortable'，
helper：'clone'，
revert：'invalid'，
cursor：'move'
}）;
所以，我的问题是，我不能让他们一起工作。左侧列表是可拖动的，右侧的可排序也正在工作，但连接不起作用。没有下火事件正在开火...这可能在一般吗？如果有人有一个想法来获得这项工作？
当可排序 plugin接收一个拖动的项目，它期望该元素附加一些元数据，以指向应该丢弃的实际数据项。元数据通过KO的 ko.utils.domData.set 函数附加。它被称为：
ko.utils.domData.set（element，key，value）; p>
所以，在一个项目被删除到可排序之前，你需要附加这个元数据。如下所示：
$（。drag-item）。draggable（{
connectToSortable：.container ，
helper：clone，
start：function（event，ui）{
ko.utils.domData.set（event.target，ko_dragItem，true）;
}
}）;
当可拖动项目被删除时，插件会尝试两种方式创建副本以实际放入可排序的observableArray。首先，它在项目上查找 clone 函数。第二，它运行一个拖动函数，该函数在可排序绑定中配置，并使用返回值作为项目。
所以，可排序的绑定可能如下所示：
< div class =containerdata-bind =sortable：{data ：任务，拖动：handleDraggedItem}>
< div class =itemdata-bind =text：name>
< / div>
< / div>
With handleDraggedItem like：
this.handleDraggedItem = function（item，event，ui）{
return new Task（ui.item.text（））;
};
这是jsFiddle中的一个示例：http://jsfiddle.net/rniemeyer/aewLbnrm/
所以，你想要决定你想要的构建您的项目。您可以在可拖动的开始方法中执行此操作，只需从拖动的函数返回该项目，或者像我的拖动函数中的示例。希望一切都有道理！
maybe someone can help me.
I got a large view in a webapp. There is a list of products on the left and a list of categories on the right side. The products should be dragged inside the categories.
The list of products was an observableArray. Now we got performance problems (especially on IE) when the list has more than 1000 entries. So cause the products itself does not change, we took them out of the knockout binding, concat them in a string and append only one node. Now of course, the knockout sortable binding does not work anymore...
This is the template for the categories:
<div data-bind="sortable: {data: Products, beforeMove: $root.verifyProducts}, attr: { 'data-max': MaxProducts }">
<div class="menuEditTab2CatDragItem clearfix" data-bind="attr: { 'data-prodid': Id }">
<div class="menuEditTab3ProdsNameText" data-bind="text: Name"></div>
<div class="pull-right" style="margin-left:8px;"><i style="margin-top:-4px;" class="icon-remove" data-bind="click: $parent.removeProduct"></i>
</div>
<div class="pull-left menuEditTab3ProdsIdText">ID: <span data-bind="text: Id"></span>
</div>
</div>
And here is the js code for the products list on the left side:
function fillAllProductsTab() {
var parts = '';
allProducts.forEach(function (item) {
parts += '<div id="f_all_' + item.Id + '" >' + // draggable="{data: $data, options:{containment: \'\#menuEditTab3Ce\', revert: \'invalid\'}}"
'<div class="menuEditTab2CatDragItem">' +
'<div>' + item.Name + '</div><div class="clearfix menuEditTab3ProdsIdText">' +
'<div class="pull-left">ID: <span>' + item.Id + '</span></div><div class="pull-right">' +
'<span>' + item.Price + '</span> €</div></div></div></div>';
});
$("#allp").append(parts);
};
Now my thought was I can manually init the draggable plugin on the products list after appended them:
$('#allp > div').draggable({
//connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
cursor: 'move'
});
So, my problem is, that I cant get them work together. The left list is draggable, and the sortable on the right is also working but the connection does not work. There is no drop event which is fireing... Is this possible in general? If anyone has an Idea to get this work?
When the sortable plugin receives a dragged item, it expects the element to have some meta-data attached to point to the actual data item that should be dropped. The meta-data is attached via KO's ko.utils.domData.set function. It is called like:
ko.utils.domData.set(element, key, value);
So, before an item is dropped into the sortable, you would want to attach this meta-data. Something like:
$(".drag-item").draggable({
connectToSortable: ".container",
helper: "clone",
start: function(event, ui) {
ko.utils.domData.set(event.target, "ko_dragItem", true);
}
});
When a draggable item is dropped, the plugin tries two ways to create a copy to actually place into the sortable's observableArray. First, it looks for a clone function on the item. Second it runs a dragged function that is configured in the sortable binding and uses the return value as the item.
So, a sortable binding might look like:
<div class="container" data-bind="sortable: { data: tasks, dragged: handleDraggedItem }">
<div class="item" data-bind="text: name">
</div>
</div>
With handleDraggedItem like:
this.handleDraggedItem = function(item, event, ui) {
return new Task(ui.item.text());
};
Here is a sample in jsFiddle: http://jsfiddle.net/rniemeyer/aewLbnrm/
So, you would want to decide how/where that you want to construct your item. You could do it in the draggable start method and simply return the item from your dragged function or do it like in my sample in the dragged function. Hope that all makes sense!
这篇关于从外部敲打可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
