使用jquery拖动对象的程序 [英] Program of dragging an object using jquery
本文介绍了使用jquery拖动对象的程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
创建一个网页并实现可拖动功能，将对象拖到用户想要的任何位置。
应用以下约束：
Create a webpage and implement the dragable feature to drag an object wherever the user wants.
Apply the following constraints:
标签，id为draggable
标签，提供图片，假设图片位于同一目录中，名称为fish.jpg
标签，提供图片，假设图片位于同一目录中，名称为fish.jpg
标签文本拖我走动
使用以下JQuery库：
https://code.jquery.com/jquery-1.10 .2.js
https://code.jquery.com/ui/1.10.2/jquery-ui.js
< b>我尝试过：
tag with id as draggable
tag with the image provided, assume the image is in the same directory with the name "fish.jpg"
tag with the image provided, assume the image is in the same directory with the name "fish.jpg"
tag with the text "Drag me around"
Use the following JQuery Libraries:
https://code.jquery.com/jquery-1.10.2.js
https://code.jquery.com/ui/1.10.2/jquery-ui.js
What I have tried:
<!DOCTYPE HTML>
<html>
<head>
<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));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="fish.jpg" draggable="true"
ondragstart="drag(event)">
<p>Drag me around</p>
</body>
</html>
推荐答案
你看错了地方，你试过的是基于HTML5拖放API，因为您应该使用jquery ui，所以正确引用如下： Draggable | jQuery UI [ ^ ]和jquery库太老了。
跳过课程确实是一个坏主意。
You are looking at the wrong place, what you have tried was based on HTML5 drag and drop API, since you are supposed to use jquery ui, the correct reference is here: Draggable | jQuery UI[^] and the jquery libraries are way too old.
It's really a bad ideas to skip lessons.
这篇关于使用jquery拖动对象的程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
