如何处理从SAPUI5中的ListBox拖放？

我发现SAPUI5支持拖放function。 但我无法在我的应用程序中实现相同的function。 我试图绑定到dragstart和dragleave事件，它们不起作用。

我甚至尝试在其他线程（ http://jsbin.com/qova/2/edit?html,output ）中提供示例。 这个例子也不起作用。 我可以选择列表项，但是当我尝试拖动时，选择只是扩展而没有任何反应。

如果我做错了，请告诉我。

这是HTML快照

源代码

          $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core'); $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget'); $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse'); $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable'); $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable'); $(function() { $("#lb1-list, #lb2-list").sortable({ connectWith : ".ui-sortable" }).disableSelection(); }); var city1 = "Berlin|London|New York|Paris|Amsterdam", city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong"; var oListBox1 = new sap.ui.commons.ListBox( "lb1", { items : $.map(city1.split("|").sort(), function(v, i) { return new sap.ui.core.ListItem({ text : v }); }), height : "150px" }); var oListBox2 = new sap.ui.commons.ListBox("lb2", { items : $.map(city2.split("|").sort(), function(v, i) { return new sap.ui.core.ListItem({text : v }); }), height : "150px" }); var oLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed : false}) oLayout.createRow(oListBox1, oListBox2).placeAt("content");    
   

更新：如果列表是静态的，则解决方案可以正常工作。 但对于动态列表，我们通过代码添加行，SAPUI5重新呈现列表并调用remove属性。 remove属性调用jQuery-UI remove属性并删除CSS Class属性。 一旦我将列表项设置为静态，拖放工作正常。

当列表是动态的时，是否有拖放解决方案？

找到一个解决方案请注意，此解决方案适用于使用单独视图和控制器创建的UI5应用程序。

对于动态列表，jquery-ui draggable必须在onAfterRendering中调用。 否则，一旦列表重新呈现，jquery-ui添加的类将被删除。

对于像我发布的内联UI5应用程序，我们可以尝试将“onAfterRendering”事件委托添加到列表控件。

Answer 1

有可能的。

请参阅http://jsbin.com/zikuj/1/edit?html,js,output ，了解保持框架同步的工作实现（并原谅了火腿的代码……我只是为了做一个js几个月）。 也就是说，这似乎太脆弱，无法在生产代码中使用。

和dnd.js：

 var newItemCount = 30; function allowDrop(ev) { 'use strict'; ev.preventDefault(); } function drag(ev) { 'use strict'; //hack to get from text element to the list item...should do a smarter walk up but... var element = document.elementFromPoint(ev.x, ev.y).parentElement; console.log("Text data for source object to drag: " + element.id); ev.dataTransfer.setData("Text", element.id); } function drop(ev) { 'use strict'; ev.preventDefault(); var foundIt = false, sourceID = ev.dataTransfer.getData("Text"), target = ev.target; //hacky way to identify if this is the container element to drop on... while (target && (target.id.indexOf("dndList") !== 0 || (target.id.indexOf("-") > -1))) { target = target.parentElement; } if (target) { console.log("target id is " + target.id); var targetWidget = sap.ui.getCore().byId(target.id), potentialSource = sap.ui.getCore().byId("dndList1"), psItems = potentialSource.getItems(); psItems.forEach(function (c) { if (c.sId === sourceID) { potentialSource.removeItem(sourceID); targetWidget.addItem(new sap.ui.core.ListItem({id: "xxlb" + newItemCount, text : c.mProperties.text})); newItemCount++; foundIt = true; } }); if (!foundIt) { potentialSource = sap.ui.getCore().byId("dndList2"); psItems = potentialSource.getItems(); psItems.forEach(function (c) { if (c.sId === sourceID) { potentialSource.removeItem(sourceID); targetWidget.addItem(new sap.ui.core.ListItem({id: "xxlb" + newItemCount, text : c.mProperties.text})); newItemCount++; } }); }//!foundIt } //target identified }//drop (function () { 'use strict'; var city1 = "Berlin|London|New York|Paris|Amsterdam", city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong", oListBox1 = new sap.ui.commons.ListBox("dndList1", { items : $.map(city1.split("|").sort(), function (v, i) { return new sap.ui.core.ListItem({ id: "xxlb1" + i, text : v }); }), height : "150px" }), oListBox2 = new sap.ui.commons.ListBox("dndList2", { items : $.map(city2.split("|").sort(), function (v, i) { return new sap.ui.core.ListItem({id: "xxlb2" + i, text : v }); }), height : "150px" }), oButton = new sap.ui.commons.Button({text: "Add an item", press: function () { oListBox1.addItem(new sap.ui.core.ListItem({id: "xxlb" + newItemCount, text : "newthing" + newItemCount })); newItemCount++; } }), oLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed : false}); oLayout.createRow(oListBox1, oListBox2).createRow(oButton).placeAt("content"); }()); 

Answer 2

我在这里有一个例子也许它很有帮助

例

我们使用已经捆绑在SAPUI5中的jqueryui API来实现这一点。

-D

Answer 3

找到一个解决方案

请注意，此解决方案适用于使用单独视图和控制器创建的UI5应用程序。

对于动态列表，jquery-ui draggable必须调用控制器的onAfterRendering。 否则，一旦列表重新呈现，jquery-ui添加的类将被删除。

对于像我发布的问题中的内联UI5应用程序，我们可以尝试将“onAfterRendering”事件委托添加到列表控件。

Answer 4

这里有一个工作示例：
将项目拖动到另一个树
您需要设置一些jQuery事件才能使其正常工作。

 $("#" + sap.ui.getCore().byId("middleTree").getId()).on("drop", function(event) { event.preventDefault(); event.stopPropagation(); alert("Dropped!"); }); $("#" + sap.ui.getCore().byId("middleTree").getId()).on("dragover", function(event) { event.preventDefault(); event.stopPropagation(); $(this).addClass('dragging'); }); $("#" + sap.ui.getCore().byId("middleTree").getId()).on("dragleave", function(event) { event.preventDefault(); event.stopPropagation(); $(this).removeClass('dragging'); });