|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2022-2-9 22:07 编辑
HTML的元素一般都是静止状态，但交互离不开元素的可拖动性，因此，HTML5引入了 draggable 属性。draggable源于动词 drag，拖动，able 作为形容词后缀，表示可以、能够等意思，draggable就是可拖动的之意（注意g要双写）。
当web元素拥有 draggable="true" 的属性设定，理论上它是可以拖动的，不论它是一个图片，还是一个 div，甚至只是一个链接。这里，以图片为例，将 draggable 属性写入 img 标签：
<img id="img1" alt="" src="图片地址" draggable="true" />
这样，理论上，图片就是可以拖动的。但是，wed可视对象能否真正被拖动，HTML自身无法独立完成，img标签仅赋予了图片可拖动的属性，真正实现起来，需要通过设计一系列的 JS 函数来帮忙完成。
第一，我们要明确拖动什么，可用 dataTransfer.setData() 方法来设置被拖放内容的相关数据。
data是数据，transfer，转移之意，dataTransfer就是数据转移、移动、拖动；set，设置，setData，设置数据。此方法需要两个参数：格式和数据。第一个参数，即数据格式，我们可以自设为“pic”或其他的，是将来要引用数据的关键词依据，保持声明引用前后一致就行，第二个参数，即数据，就是图片呀什么的要被拖动的对象，它通过目标对象的 id 标识符来表示。
比如，假设有一个元素叫 obj，则如果要拖动这个元素，可以这么办：
dataTransfer.setData("pic",obj.target.id);
如前已解释，pic是我们定义的数据格式或类型标识，将在后续被使用，要放在引号里；第二个参数 obj.target.id 语句里，obj是我们定义的对象名，target.id 是目标id，必须这样表达，强记。
现在，我们来设计一个JS函数，完成定义要拖动什么的工作：
function drag(obj) {
obj.dataTransfer.setData("pic", obj.target.id);
}
drag(obj)是我们自定义的函数，函数名 drag，函数参数是obj，指被拖动对象。函数内容放在大括号里，表示对象obj通过 dataTransfer.setData() 方法，定义数据类型为 pic 的 obj 为即将被移动的对象（内容）。
drag(obj)这个函数发生在HTML对象开始移动之时，即 JS 对应的 ondragstart 事件，所以，img标签的HTML代码要加入它，通过 ondragstart 事件 调用 drag(obj) 函数，drag(obj)函数的参数不能随便命名，只能用“event”这个单词，亦即，告诉函数 drag(obj)，我们要在图片的 ondragstart 事件中调用你，你的 obj 参数传入的是 event 元素：
<img id="img1" alt="" src="图片地址" draggable="true" ondragstart="drag(event)" />
再次强调：上句，新加入的蓝红字串里，自定义的drag()函数的obj参数只能用 event（元素）这个单词传入，后面定义的自定义函数也是这样使用。
第二，移动到何处。移民要有接收地，假如你是移民，你从A国出发，即 ondragstart 事件已经发生，下一步就是路经（over）某国，JS对应的 ondragover 事件发生，经过B国时，HTML世界里，默认是不接纳移民被放下（drop）的，我们需要取消该拒绝移民的“政策”：
preventDefault()
这是“阻止默认属性”之意，亦即取消默认设置，令其开放准许接接收“移民”。我们需要设计一个函数来发出我们的强迫B国接收移民的函数指令：
function allowDrop(obj) {
obj.preventDefault();
}
这个函数我们也设计了一个参数 obj，对象之意，obj是一个函数变量，这里它不是指图片，而是指接收图片“移民”的一个“国家”，B国，在HTML里，可以是一个 div 盒子：
(这个地方代码编辑起来很怪异，请参阅后面的相应代码)
好了，B国允许移民了，那就把移民放下，这个需要 JS 对应的 ondrop 方法，我们同样要为这个方法设计一个函数：
function drop(obj) {
obj.preventDefault();
var data = obj.dataTransfer.getData("pic");
obj.target.appendChild(document.getElementById(data));
}
drop(obj) 是我们自定义的函数，在这里，obj 参数指被放下的图片对象（即“移民”），首先申明去除图片被放下时接收地打开方式的默认设定（默认是链接处理），再通过getData方法获取被放下的目标数据类型依据，即pic（参考第一步的解释），赋值给data句柄变量，接着在目的地即“B国”用 appendChild（追加孩子）的方法将图片追加到其中。
drop(obj)函数在B国 div 中通过 ondrop 事件调用：
(这个地方代码编辑起来很怪异，请参阅后面的相应代码)
完整的HTML和JS代码如下（设定了图片尺寸与div边框以方便观察效果）：
- <img id="img1" alt="" src="./pic/2.jpg" draggable="true" ondragstart="drag(event)" width="200" />
- <div id="B国" ondragover="allowDrop(event)" ondrop="drop(event)" style="border:1px solid; width:400px;height:400px;"></div>
- <script language="javascript">
- function drag(obj) {
- obj.dataTransfer.setData("pic", obj.target.id);
- }
- function allowDrop(obj) {
- obj.preventDefault();
- }
- function drop(obj) {
- obj.preventDefault();
- var data = obj.dataTransfer.getData("pic");
- obj.target.appendChild(document.getElementById(data));
- }
- </script>
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2022-2-9 21:51
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
