如何使一个div可拖在另一个div上？
如何使一个div可拖在另一个div上？
提问于 2016-10-19 06:33:54
我要让另一片区域可拉。怎么做？
这是我的html，我使用媒体查询进行了响应。
<style>
.text-canvas{
z-index:1;
position:absolute;
}
.imageupload{
z-index:-1;
}
</style>
<script>
function submit_button(){
alert('hiii');
}
</script>
<div class="parent-canvas">
<div class="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="img.png">
</div>
</div>
</div>在这里，我需要使这个文本-画布div可控性，这样用户可以拖动我的文本，他可以把它放在图像中的任何地方(仅在图像-画布div )。我看到html拖放，但我不知道如何应用这个。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-10-19 08:07:33
基于html :添加此脚本
$( ".text-canvas"").draggable({
containment: ".imageupload"
}); 对于语法或工作上的任何疑问，请检查这些文档。
(1) http://api.jqueryui.com/draggable/
(2) https://jqueryui.com/draggable/
确保您已经包含了jquery-ui.js。首先您需要调用jquery.js或jquery.min.js，然后只调用jquery-ui.js，顺序很重要。例：
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>Stack Overflow用户
发布于 2016-10-19 06:39:34
查看HTML5拖放
HTML5拖放
Stack Overflow用户
发布于 2016-10-19 06:36:33
为可拖放的elements.Enable (任何DOM元素都是可下垂的)创建目标，为可拖放的元素创建目标。
<!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>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</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() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>jQuery UI可删除插件使选定的元素可下垂(这意味着它们接受可拖放的元素)。您可以指定每个人将接受哪些拖放。
主题化
这个可下垂的小部件使用jQuery UI CSS框架来样式它的外观和感觉。如果需要可下垂的特定样式，以下CSS类名可用于重写或作为类选项的键：
ui- droppable :可掉的元素。当激活了可拖放在此可下拉式上的拖放时，会添加ui可下垂的active类。当拖动可拖在此可下拉式上时，会添加ui可下垂的悬停类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40123861
复制相关文章
相似问题
腾讯云开发者
