Fatal编程技术网
  • jquery/
  • Jquery 如何在SAPUI5中处理从列表框拖放？

Jquery 如何在SAPUI5中处理从列表框拖放？

jquery sapui5

Jquery 如何在SAPUI5中处理从列表框拖放？,jquery,jquery-ui-sortable,sapui5,Jquery,Jquery Ui Sortable,Sapui5,我发现SAPUI5支持拖放。 但我无法在我的应用程序中实现同样的功能。我试图绑定到dragstart和dragleave事件，但它们不起作用 我甚至尝试使用其他线程（）中提供的示例。这个例子也不起作用。我可以选择列表项，但当我尝试拖动时，选择只是扩展，什么也没有发生 如果我做错了什么，请告诉我 这是HTML快照 源代码 <!DOCTYPE html> <html> <head> <meta name="description" content

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

我甚至尝试使用其他线程（）中提供的示例。这个例子也不起作用。我可以选择列表项，但当我尝试拖动时，选择只是扩展，什么也没有发生

如果我做错了什么，请告诉我

这是HTML快照

源代码

    <!DOCTYPE html>
<html>
<head>
<meta name="description" content="OpenUI5 Listbox Drop and Drag" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Drag and Drop List Test</title>
<script id='sap-ui-bootstrap' 
    src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
    data-sap-ui-theme="sap_goldreflection"
    data-sap-ui-libs="sap.ui.commons">  
</script>

<script type="text/javascript">
    $.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");
</script>

</head>
<body id="body" class="sapUiBody">
    <div id="content"></div>
</body>
</html>


拖放列表测试
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui-core'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui小部件'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui鼠标'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui-draggable'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui-sortable'）；
$（函数（）{
$（“#lb1列表，#lb2列表”）。可排序({
连接到：“.ui可排序”
}).disableSelection（）；
});
var city1=“柏林|伦敦|纽约|巴黎|阿姆斯特丹”，
city2=“悉尼|墨尔本|布里斯班|珀斯|卧龙岗”；
var oListBox1=new sap.ui.commons.ListBox（“lb1”{
项：$.map（city1.split（“|”）.sort（），函数（v，i）{
返回新的sap.ui.core.ListItem（{text:v}）；
})，高度：“150像素”
});
var oListBox2=新的sap.ui.commons.ListBox（“lb2”{
项：$.map（city2.split（“|”）.sort（），函数（v，i）{
返回新的sap.ui.core.ListItem（{text:v}）；
})，高度：“150像素”
});
var oLayout=new sap.ui.commons.layout.MatrixLayout（{layoutFixed:false}）
创建行（oListBox1，oListBox2）.placeAt（“内容”）；
更新：如果列表是静态的，那么解决方案可以正常工作。但对于动态列表，我们通过代码添加行，SAPUI5重新呈现列表并调用remove属性。移除属性调用jQuery UI移除属性并移除CSS类属性。一旦我将列表项设置为静态，拖放就可以正常工作了

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

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

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

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

这是可能的

请参阅一个保持框架同步的工作实现（请原谅那些笨拙的代码……我只做了几个月的js）。也就是说，这似乎太脆弱，无法在生产代码中使用

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="OpenUI5 Listbox Drop and Drag" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' /> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Drag and Drop List Test</title>
<script id='sap-ui-bootstrap'
    src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
    data-sap-ui-theme="sap_goldreflection"
    data-sap-ui-libs="sap.ui.commons"> 
</script>

<script type="text/javascript" src="dnd.js">
</script>

</head>
<body id="body" class="sapUiBody">
    <div id="content" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

</body>
</html>
我这里有一个例子 也许会有帮助


萨姆利斯特先生{
边框：1px实心#ccc；
}
.ui可排序{
最小高度：40px；
}
.ui可排序>li{
光标：指针；
}
jQuery（函数（）{
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui-core'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui小部件'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui鼠标'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui-draggable'）；
$.sap.require（'sap.ui.thirdparty.jqueryui.jqueryui-sortable'）；
var city1=“柏林|伦敦|纽约|巴黎|阿姆斯特丹”；
var city2=“悉尼|墨尔本|布里斯班|珀斯|卧龙岗”；
var oListBox1=新的sap.m.List（“lb1”{
项：$.map（city1.split（“|”）.sort（），函数（v，i）{
返回新的sap.m.StandardListItem（{title:v}）；
}), 
高度：“150px”，
宽度：“200px”
}).addStyleClass（'sapuizizecompact'）；
var oListBox2=新的sap.m.List（“lb2”{
项：$.map（city2.split（“|”）.sort（），函数（v，i）{
返回新的sap.m.StandardListItem（{title:v}）；
})，高度：“150px”，
宽度：“200px”
}).addStyleClass（'sapuizizecompact'）；
var oLayout=新的sap.m.HBox({
项目：[oListBox1，oListBox2]
}).placeAt（“内容”）；
oLayout.onAfterRendering=函数（）{
if（sap.m.HBox.prototype.onAfterRendering）{
sap.m.HBox.prototype.onAfterRendering.apply（this）；
}
$（“#lb1 listUl”）.addClass（'ui-sortable'）；
$（“#lb2 listUl”）.addClass（'ui-sortable'）；
$（“#lb1 listUl”）。可排序({
连接到：“.ui可排序”
}).disableSelection（）；
$（“#lb2 listUl”）。可排序({
连接到：“.ui可排序”
}).disableSelection（）；
}
});
我们使用已经捆绑在SAPUI5中的jqueryui API来实现这一点

-D

找到了一个解决方案：

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

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

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

这里有一个工作示例：

您需要设置一些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');
});
如果您使用的是Chrome，您需要查看jsbin，否则在您自己的网络上运行场景谢谢Jasper的回复。我通过将代码复制到记事本并在chrome中启动来尝试这个例子。它不起作用，我还尝试从Eclipse创建SAPUI5应用程序。但它仍然不起作用……不确定出了什么问题。非常感谢您的帮助。我刚刚在Safari和FF上创建并运行了localhost works，您是否更改了sap ui引导以指向本地资源？是的，Jasper，我对eclipse版本做了更改，但对于记事本版本，我仍然指的是“openui5.hana.ondemand.com”。我已经用HTML快照更新了我的帖子…是吗 
<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script id="sap-ui-bootstrap" 
    type="text/javascript"
    data-sap-ui-libs="sap.m"
    data-sap-ui-theme="sap_bluecrystal" 
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>

<style>
    .sapMList {
        border: 1px solid #ccc;
    }

    .ui-sortable {
        min-height: 40px;
    }

    .ui-sortable>li{
        cursor: pointer;
    }
</style>
<script>
jQuery(function() {
    $.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');

    var city1 = "Berlin|London|New York|Paris|Amsterdam";
    var city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong";

    var oListBox1 = new sap.m.List("lb1", {
        items : $.map(city1.split("|").sort(), function(v, i) {
            return new sap.m.StandardListItem({ title : v });
        }), 
        height : "150px",
        width: "200px"
    }).addStyleClass('sapUiSizeCompact ');

    var oListBox2 = new sap.m.List("lb2", {
        items : $.map(city2.split("|").sort(), function(v, i) {
            return new sap.m.StandardListItem({title : v });
        }), height : "150px",
        width: "200px"
    }).addStyleClass('sapUiSizeCompact ');

    var oLayout = new sap.m.HBox({
        items : [oListBox1, oListBox2]
    }).placeAt("content");

    oLayout.onAfterRendering = function() {
        if (sap.m.HBox.prototype.onAfterRendering) {
            sap.m.HBox.prototype.onAfterRendering.apply(this);
        }

        $("#lb1-listUl").addClass('ui-sortable');
        $("#lb2-listUl").addClass('ui-sortable');

        $("#lb1-listUl").sortable({
            connectWith : ".ui-sortable"
        }).disableSelection();

        $("#lb2-listUl").sortable({
            connectWith : ".ui-sortable"
        }).disableSelection();
    }
});
</script>

</head>
<body class="sapUiBody">
  <div id="content"></div>
</body>
</html>

$("#" + 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');
});