- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
下面是我的场景解释截图,
从上面提到的图片。棕色框位置被定义为可放置,下面的选择是可拖动的。如果我拖放它工作正常。
例如,如果我将另一个选项拖动到已定义的位置,则其重叠
我想做的是它将文本替换为“受人尊敬”,并且已经删除的文本“supercious”将返回到下面框中的选择文本。我该怎么做。请任何人帮助我摆脱这个问题。下面是我的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.box1
{
background: #E7AC9F;
height: 20px;
width: 100px;
display: inline-block;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
.di1{
border: 1px dotted #22BAA0;
margin: 10px;
padding: 10px;
width: 100px;
border-radius: 4px;
font-size: 14px;
cursor: move;
list-style: none;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$(".box1").sortable();
$(".box1").disableSelection();
$(".qitem2").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$(".box1, #qlist2").droppable({
hoverClass : 'ui-state-highlight',
accept: ":not(.ui-sortable-helper)",
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
$(ui.draggable).removeAttr("style");
}
});
});
</script>
</head>
<body>
<p>The multi-coloured eyes,<div class="box1"></div>and striking facial cuts and curves<div class="box1"></div> the Siberian Husky as one of the most desirable and breeds <div class="box1"></div>of dogs. Originally from Siberia, they look like replicas of wolves; also, they are challenging to new owners due to their agility and<div class="box1"></div></p>
<div id="qlist2">
<div class="qitem2 di1">
Option 1
</div>
<div class="qitem2 di1">
Option 2
</div>
<div class="qitem2 di1">
Option 3
</div>
<div class="qitem2 di1">
Option 4
</div>
<div class="qitem2 di1">
Option 5
</div>
<div class="qitem2 di1">
Option 6
</div>
<div class="qitem2 di1">
Option 6
</div>
</div>
</body>
</html>
最佳答案
只需为 draggables 元素创建一个容器,这样每当第二个元素被放入 droppable 中时,我们就可以将第一个元素移动到它的容器中
HTML:
<div id="qlist2">
<div id = "dragitem1-container" class="drag-container">
<div id="dragitem1" class="qitem2 di1">
Option 1
</div>
</div>
<div id = "dragitem2-container" class="drag-container">
<div id="dragitem2" class="qitem2 di1">
Option 2
</div>
</div>
<div id = "dragitem3-container" class="drag-container">
<div id="dragitem3" class="qitem2 di1">
Option 3
</div>
</div>
</div>
<div class="droppable-element">
</div>
JS:
$(document).ready(function() {
function makedraggable() {
$(".qitem2").draggable({
"revert": "invalid"
});
makedraggable();
$(".droppable-element").droppable({
"accept": ".qitem2",
"drop": function(event, ui) {
if ($(this).find(".qitem2").length) {
var $presentChild = $(this).find(".qitem2"),
currChildId = $presentChild.attr("id"),
$currChildContainer = $("#" + currChildId + "-container");
$currChildContainer.append($presentChild);
$presentChild.removeAttr("style");
makedraggable();
}
$(ui.draggable).clone().appendTo(this).removeAttr("style");
$(ui.draggable).remove();
}
})
})
我想这就是你想要的
关于javascript - 使用 JQuery UI 拖放以填充空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41425515/
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。 我不明白静态属性之间的区别: p
当元素被拖放时,有没有办法从被拖动的元素中获取 id(或其他属性值)? 例如,在左侧,我有一堆 div,我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
每当我更改其中一个类属性时,我想设置一个修改标志,如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
由于某种原因,我下面的代码曾经可以正常工作,但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
为什么将 ; 放在最佳实践中?在函数定义的末尾。 例如 var tony = function () { console.log("hello there"); }; 优于: var tony
我在容器内有一个位图。当我拖动容器时,光标变为编辑文本形状,图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。 这是我的代码,所以你可以看到我有 RTFM: function createIc
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。 当我让 Visual Studio 20
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。 我在一本书上找到这样声
我正在设置多个方法,想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。 主要方法: public static void Main(string[] args) { i
我正在尝试使用 crontab 编写一个简单的任务,将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
有人可以告诉我如何使用这个解决方案来解决我的问题吗?我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true,但是当我拖动弹出面板并将其放到新位置时,它
所以,基于this answer ,我有一组可以拖放并卡入到位的 div。唯一的问题是,可拖动的 div 具有不同的高度,我需要它们始终捕捉到目标的底部,而不是顶部。 您可以在this JsFiddl
我是一名优秀的程序员,十分优秀!