javascript - HTML 易于(和触摸兼容)拖放？-6ren

javascript - HTML 易于(和触摸兼容)拖放？

转载作者：行者123 更新时间：2023-11-28 04:51:39

<!DOCTYPE HTML>
<html>
<head>
<style>
p {
    font-family: "Comic Sans",sans-serif;
}
#div1 {   
    width: 7.5%;
    height: 100px;
    margin-left: 10px;
    margin-right: 12px;
    padding: 3%;
    border-bottom: 4px solid black;
    border-radius: 0px 0px 25px 25px;
    background-color: white;
    float:right;
    position: absolute;
    display: block;
    right: 0px;
}
#div2 {
    width: 7.5%;
    height: 100px;
    margin-left: 10px;
    margin-right: 15%;
    padding: 3%;
    border-bottom: 4px solid black;
    border-radius: 0px 0px 25px 25px;
    background-color: white;
    position: absolute;
    display: block;
    right: 0px;
}
#div3 {
    width: 7.5%;
    height: 100px;
    margin-left: 10px;
    margin-right: 30%;
    padding: 3%;
    border-bottom: 4px solid black;
    border-radius: 0px 0px 25px 25px;
    background-color: white;
    position: absolute;
    display: block;
    right: 0px;
}
#div4 {
    width: 101px;
    height: 101px;
    margin-left: 15%;
    padding: 1%;
    border-bottom: 4px solid black;
    border-radius: 0px 25px 25px 0px;
    background-color: white;
}
#div5 {
    height: 101px;
    padding: 10px;
    border-bottom: 4px solid black;
    border-radius: 0px 25px 25px 25px;
    background-color: white;
    margin: 1.5%;
}
#text {
    border-bottom: 4px solid black;
    padding: 1px;
    width: 13%;
    height: 50px;
    border-radius: 25px 25px 0px 0px;
    background-color: white;
    margin-left: 1.5%;
    color: #417cb8;
    text-align: center;
}
#tag1 {
    border-bottom: 4px solid black;
    padding: 1px;
    margin-right: 12px;
    width: 13%;
    height: 50px;
    border-radius: 25px 25px 0px 0px;
    background-color: white;
    float: right;
    position: absolute;
    margin-right: 5px;
    font-family: "Comic Sans",sans-serif;
    right: 0px;
    text-align: center;
    color: #417cb8;
}
#tag2 {
    margin-right: 15%;
    padding: 5px;
    border-bottom: 4px solid black;
    width: 13%;
    height: 50px;
    border-radius: 25px 25px 0px 0px;
    background-color: white;
    position: absolute;
    font-family: "Comic Sans",sans-serif;
    text-align: center;
    display: block;
    right: 0px;
    color: #417cb8;

}
#tag3 {
    margin-right: 30%;
    padding: 5px;
    border-bottom: 4px solid black;
    width: 13%;
    height: 50px;
    border-radius: 25px 25px 0px 0px;
    background-color: white;
    position: absolute;
    font-family: "Comic Sans",sans-serif;
    text-align: center;
    display: block;
    right: 0px;
    color: #417cb8;
}
#tag4 {
    float: left;
    padding: 5px;
    border-bottom: 4px solid black;
    width: 10%;
    height: 101px;
    border-radius: 25px 0px 0px 25px;
    background-color: white;
    position: absolute;
    font-family: "Comic Sans",sans-serif;
    text-align: center;
    display: block;
    margin-left: 1.5%;
    color: #417cb8;
    padding: 1%;
}
#element {
	float: left;
}
img.object {
	border: 1px solid #6496c8;
	background-color: white;
	border-radius: 25px;
	padding: 10px;
	height: 101px;
	width: 101px;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

<script>
    $('#element').draggable();
    $( "#div1" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "isDropped" )
            .html( "Dropped!" );
        }
      });
    });

</script> <script>
function allowDrop(ev, div) {
    ev.preventDefault()
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id)
}

function drop(ev, div) {
    ev.preventDefault()
	if(div == 'div4') 
	{
		var data = ev.dataTransfer.getData("text")
		var element = document.getElementById(data)
		element.parentNode.removeChild(element)
	}
	else if (div == 'div5') {
		if(document.getElementById(div).innerHTML <= 5)
		{
			var data = ev.dataTransfer.getData("text")
			ev.target.appendChild(document.getElementById(data))
		}
	}
	else if (div == 'element')
	{
		
	}
	else
	{
		if(document.getElementById(div).innerHTML <= 5)
		{
			var data = ev.dataTransfer.getData("text")
			ev.target.appendChild(document.getElementById(data))
		}
	}
}
</script>
</head>
<div style="border: 1px solid black; border-radius: 30px; background-color: #6496c8;">
<body>

<h2 style="float: center; text-align: center; border-bottom: 4px solid black; width: 275px; height: 65px; border-radius: 25px 0px 0px 0px; background-color: white; margin-left: 1.5%;"><font style="text-align:center;" face="verdana" color="#417cb8" size=30>Organiser</font></h2>

<div id="tag1"><font size="7">Now</font></div><br><br><br><br>
<div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>

<div id="tag2"><font size="7">Next</font></div><br><br><br><br>
<div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
<div id="tag3"><font size="7">After</font></div><br><br><br><br>
<div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>

<br><br><br><br><br><br><br><br>
<p id="text"><font size="7">To Do</font></p>

<p id="div5" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')" overflow="Scroll">
<img class="object" src="ABC.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="100">
<img class="object" src="pencil.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="100">
<img class="object" src="recycle.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="100">
<img class="object" src="apple.png" draggable="true" ondragstart="drag(event)" id="drag4" width="100" height="100">

<br><br><p><div id = "tag4"><font size="10">Done</font></div></p>
<div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"><img src="https://cdn3.iconfinder.com/data/icons/tools-solid-icons-vol-2/72/59-512.png" height=100px width=100px></div><br>


</body>
</div>
</div>
</html>

当我尝试在移动设备上拖放时，它什么也没做……这是苹果特有的问题还是代码有问题？它适用于 PC 和 MAC...我尝试搜索但没有找到易于实现的真正答案(我不想重写 90% 的代码)

最佳答案

以下是我能看到的一些错误:

draggable="true"是一个 HTML5 标签，可以使元素可拖动。还有您附加到它的事件，拖动事件(即 dragstart、drag、dragenter、dragleave、dragover、drop、dragend)仅适用于支持鼠标的设备。对于触摸设备(移动/表面)，您有触摸事件(即 touchstart、touchmove、touchend、touchcancel)
由于您使用的是 jQueryUI，因此您应该使用 draggable() 和 droppable() 检查它们的方式。我不知道您为什么将 HTML5 拖放与 jQueryUI 的拖放方法混在一起。
Touch Punch 库适用于使用 jQueryUI 的函数使其可拖动的元素。
我在整个页面中没有看到任何带有 id="element"的 div。您已附加 .draggable() 和 .droppable() 的元素

我发现以下链接有助于理解拖放操作:

HTML5:https://www.html5rocks.com/en/tutorials/dnd/basics/
jQueryUI DnD:https://jqueryui.com/draggable/ (文档不言自明。演示也很简单)
基于纯 JS 的拖放:https://github.com/lukasolson/drag-n-drop-js

希望对你有帮助

关于javascript - HTML 易于(和触摸兼容)拖放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40668662/

文章推荐： javascript - 一旦我使图像全宽，宽度就不正确

文章推荐： javascript - 使用 jQuery/AJAX 获取并显示 PHP 结果

文章推荐： javascript - 使用 Javascript 创建字体

文章推荐： javascript - 刷新页面时保留我的选择

c# - 属性与 get 之间的区别；放;没有得到；放;
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。我不明白静态属性之间的区别: p
jquery拖/放-获取被拖放的元素的id
当元素被拖放时，有没有办法从被拖动的元素中获取 id(或其他属性值)？例如，在左侧，我有一堆 div，我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
c# - 获取问题；放;
每当我更改其中一个类属性时，我想设置一个修改标志，如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
C# HttpClient 放
由于某种原因，我下面的代码曾经可以正常工作，但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
javascript - 放；在函数定义的末尾
为什么将 ; 放在最佳实践中？在函数定义的末尾。例如 var tony = function () { console.log("hello there"); }; 优于: var tony
bitmap - EaselJS:有问题的拖/放
我在容器内有一个位图。当我拖动容器时，光标变为编辑文本形状，图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。这是我的代码，所以你可以看到我有 RTFM: function createIc
c# - 表达式主体属性与 {get;放;}
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。当我让 Visual Studio 20
c# - 多么简单的得到；放;在一个类意味着？
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
javascript - 放(存)json数据
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
c# - { 得到;放; } 在变量声明中
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。我在一本书上找到这样声
c# - 得到;放;变量
我正在设置多个方法，想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。主要方法: public static void Main(string[] args) { i
bash - Hadoop Crontab 放
我正在尝试使用 crontab 编写一个简单的任务，将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
javascript - 限制 jQuery 中节点的拖/放？
有人可以告诉我如何使用这个解决方案来解决我的问题吗？我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
javascript - jquery sortable 禁用特定项目之间的拖/放
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - HTML 易于(和触摸兼容)拖放？