gpt4 book ai didi

javascript - SAPUI5 : Drag and Drop

转载 作者:行者123 更新时间:2023-11-30 17:04:02 26 4
gpt4 key购买 nike

我试图在 UI5 中实现拖放功能。但是,我无法正确实现它(不要评判我,我是初学者)

所以,事情是这样的。就像我开始从事这项工作时的其他人一样。我用谷歌搜索“在 SAPUI5 中拖放”并找到了一些非常好的链接。但是,我想更多地了解如何处理相同的事件。这是相同的工作代码:

http://jsbin.com/iciyof/2/edit?html,js,output

但是,我想做一些我无法理解如何实现的事情:1. 获取将项目从一个列表拖放到另一个列表后触发的事件。2. 获取那些项的值

同时尝试寻找解决方案。我遇到了很多网页和问题。在我看来,有一些重要的事情(如下所述),但我无法正确连接它们。任何帮助都很棒!

  1. jQuery.sap.ControlEvents
  2. 浏览器事件
  3. 起步、拖拉、放下

请原谅这么令人困惑的问题(我也很困惑,无法以正确的格式表达出来)

最好的问候,早产儿

最佳答案

好的,正如评论中所建议的,这里是一个示例,说明您可以使用 jQuery-UI 做什么

<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
ul.draggable {
width: 150px;
border: 1px solid #999999;
padding: 1px;
}
ul.draggable li {
background-color: #9999ff;
margin: 1px;
}
* {
list-style: none
}
#display, #display2 {
border: 1px solid #000;
padding: 5px;
}
</style>
<script>
$(document).ready(function() {
// set the <li> as draggable
$('ul.draggable li').draggable({
start: function(event, ui) {
// do something here
// example
//// show the innerHTML of the dragged element
$('#display2').html(
$(this).html()
);
},
});
// this means the <ul> can accept elements to be dropped in it
$('ul.draggable').droppable({
drop: function(event, ui) { // when the element has been dropped
// notice: the dragged/dropped <li> is ui.draggable; the dropBox is $(this)
// draggable() uses a style attribute to move the item out of its box; initially it is set to 'position: relative', as the client moves the item, a 'left' and 'top' is added in the style.
// If we remove this attribute, the item will be neatly in place.
// In stead we replace the style attribute and set it back to 'position: relative', so it is still draggable
ui.draggable.attr('style', 'position: relative')
.appendTo($(this)); // we cut the <li> from its parent, and paste it in the box where it was dropped

// example
//// show the innerHTML of the dragged element + "dropped" + the id of the dropbox
$('#display2').html(
ui.draggable.html() + ' dropped in ' + $(this).attr('id')
);

},
over: function(event, ui) {
// do something here
$('#display').html('dragover');
},
out: function(event, ui) {
// do something here
$('#display').html('out');
}

});
});
</script>
</head>
<body>
<ul id="box1" class="draggable">
<li>Amsterdam</li>
<li>Berlin</li>
<li>London</li>
<li>New York</li>
<li>Paris</li>
</ul>

<ul id="box2" class="draggable">
<li>Brisbane</li>
<li>Melbourne</li>
<li>Perth</li>
<li>Sydney</li>
<li>Wollongong</li>
</ul>
<div id="display"></div>
<div id="display2"></div>
</body>

关于javascript - SAPUI5 : Drag and Drop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28345027/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com