个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我遇到了 http://jsfiddle.net/Hh8qJ/ 的问题我知道有两个主要问题。其中一个在 Safari(可能还有 Internet Exploder)中不起作用。 Safari 中的选项好像不能做成可拖动对象？同样在 Firefox 中，选项在放下时不会取消选择。这是一个更大项目的一部分，因此我将描述我想要完成的目标以及为什么我冒险走上我所做的道路。因此，我选择了下拉列表，以便可以将元素插入其中或从中插入元素，并且如果需要，可以将项目放在下拉列表中的不同位置。在较大的项目中，只有一个下拉菜单和许多下拉区域 div。这些项目将从下拉菜单中拖到许多放置字段中，但在某些情况下可能需要向后拖动。我不确定是否有更好的方法来做到这一点，但这就是我想到的。我想避免使用 JQuery。
感谢您的帮助!
编辑:HTML 在那里是因为我必须输入一些代码，并且认为没有人想要这里的完整文件。
我将尝试给出一个更简洁的示例来说明如何实际使用它。假设我有 4 个盒子，上面有汽车名称。盒子上写着萨博、沃尔沃、福特和道奇。任务是将所有汽车从下拉区域拖到值得尊敬的下拉区域。然后，如果用户想要将汽车放回下拉菜单中，他们可以将它们从下拉区域拖回下拉菜单中，然后将它们放回到字母顺序中。 (我确实知道现在没有代码可以进行字母顺序化，但我一次尝试一个障碍。)请记住，这是一个非常小的示例，说明我计划如何将其用于更大的项目，这只是我试图使我遇到的问题尽可能简单。
<html>
最佳答案
这是我的解决方案:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:150px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function sort(uList)
{
var listItem = document.getElementById(uList).getElementsByTagName('li');
var listLength = listItem.length;
var list = [];
for(var i=0; i<listLength; i++)
list[i] = listItem[i].firstChild.nodeValue;
list.sort();
for(var i=0; i<listLength; i++)
listItem[i].firstChild.nodeValue = list[i];
}
</script>
</head>
<body>
<ul id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div1')">
<li id="list-item3" draggable="true" ondragstart="drag(event)">a</li>
<li id="list-item5" draggable="true" ondragstart="drag(event)">b</li>
<li id="list-item2" draggable="true" ondragstart="drag(event)">c</li>
<li id="list-item4" draggable="true" ondragstart="drag(event)">d</li>
</ul>
<ul id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div2')"></ul>
</body>
</html>
我希望它有帮助:)。我在上面使用了 HTML 5。将一项从一个列表拖到另一个列表后，将调用函数 sort()。该函数将用于对列表中的项目进行排序。我还没有在表单元素上尝试过，但我会看看我能做什么。
关于php - HTML 5 和 Javascript 拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13023903/
24
4
0
这个问题在这里已经有了答案: 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
我是一名优秀的程序员,十分优秀！