- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图在 UI5 中实现拖放功能。但是,我无法正确实现它(不要评判我,我是初学者)
所以,事情是这样的。就像我开始从事这项工作时的其他人一样。我用谷歌搜索“在 SAPUI5 中拖放”并找到了一些非常好的链接。但是,我想更多地了解如何处理相同的事件。这是相同的工作代码:
http://jsbin.com/iciyof/2/edit?html,js,output
但是,我想做一些我无法理解如何实现的事情:1. 获取将项目从一个列表拖放到另一个列表后触发的事件。2. 获取那些项的值
同时尝试寻找解决方案。我遇到了很多网页和问题。在我看来,有一些重要的事情(如下所述),但我无法正确连接它们。任何帮助都很棒!
请原谅这么令人困惑的问题(我也很困惑,无法以正确的格式表达出来)
最好的问候,早产儿
最佳答案
好的,正如评论中所建议的,这里是一个示例,说明您可以使用 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/
我正在尝试使Polymer Dart元素可拖动,并与列表中的另一个项目交换信息。我最近的尝试是使用元素。我正在使用由trackstart,track和trackend的此元素创建的事件。我可以触发它们
我正在使用 Windows 窗体在 C# 中构建桌面应用程序。我有一个自定义控件,我希望能够将它拖放到我的应用程序中(而不是外部)。现在我正在使用通常的 DoDragDrop/OnDragOver/O
我有一个#topleft红色标题栏,其中包含多个“选项卡”按钮,这些按钮应填充除#topright蓝色块之外的所有可用空间。 在#topleft的红色背景上单击并拖动,可以移动 Electron 主窗
我希望能够移动(在灰色背景上,通过拖放)Bootstrap 2 提供的模态表单。谁能告诉我实现此目的的最佳实践是什么? 最佳答案 默认情况下, Bootstrap 不附带任何拖放功能,但您可以添加一些
我只想在屏幕上拖动小部件,而不是拖放。 但是,每当我离开它并再次开始拖动时,它就会从开始的位置开始被拖动。就好像它被重置了。 我的猜测是构建被一次又一次地调用,所以它自动使用原始位置值。我该如何解决?
我只想在屏幕上拖动小部件,而不是拖放。 但是,每当我离开它并再次开始拖动时,它就会从开始的位置开始被拖动。就好像它被重置了。 我的猜测是构建被一次又一次地调用,所以它自动使用原始位置值。我该如何解决?
我试图在拖放过程中更改节点上的光标,但图像没有改变。我打电话 setCursor()在 DragDetectedEventHandler我的节点。我也试过调用 getParent().setCurso
这个问题已经有答案了: D3.js: Remove force.drag from a selection (3 个回答) 已关闭 7 年前。 我将以下内容附加到 svg 元素 var dragger
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
使用 jsTree 3.0.8 我想允许在树中拖放节点,但它应该只允许通过拖动特定按钮或“拖动 handle ”而不是默认的操作来启动该操作允许拖动行上任意位置的行为。 我通过 Html 填充我的树,
当元素开始被拖动时,我需要修改它。 “开始”回调有两个参数,只有第一个参数对我有用。交易是我正在使用 helper: 'clone' 这使得 event.originalTarget 仅指向“原始”元
我有一个可拖动的 img 元素。现在我想手动触发 drag() 事件,就像我们如何触发 'click' 事件一样 $(element).trigger('click')。谢谢。 这是我的函数定义 $(
这是我的 jsfiddle 代码: http://jsfiddle.net/SMqR9/16/ 您会注意到,在 IE7 中,当您向上拖动一个元素时,它在放置之前一直可见。但是,如果您向下拖动一个元素,
我是 knockout JavaScript 的新手。在我的元素中,我使用了 Knockout 拖放功能。最初我有两个部门,一个是可见的,另一个没有属性显示。当我执行拖动输入功能时,我需要隐藏第一个分
上下文:如下面jsp内输入框中的代码所示,要拖放“fruitTree”中的水果节点。 这在拖放时成功发生。每次我从fruitTree中拖放水果时,先前拖放的水果节点都会被新拖放的水果覆盖。 问题:现在
我想移动一定距离。但是,在我的系统中,存在惯性/拖动/负加速度。我正在使用这样的简单计算: v = oldV + ((targetV - oldV) * inertia) 将其应用于多个帧会使运动“上
我正在使用 Kendo Grid UI。下面是一个相同的例子。 Grid / Column resizing
我有这个页面,我只能在浏览器中访问。有一个HTML元素仅在拖放过程中存在,并且我想在Inspector / Firebug中获取/分析其HTML代码。但是一旦我停止拖动,该元素就会被删除。 有什么方法
这真杀了我。我不小心将文件拖到其他位置时遇到问题。与其他编辑器相比,在vscode中,我似乎更经常为此受害。是否有任何插件,设置或其他使我无法使用鼠标技能的东西? 最佳答案 我有同样的问题。当文件夹意
//The following game has been designed as an educational resource //for Key Stage 1 and 2 children.
我是一名优秀的程序员,十分优秀!