我想将一个Div元素拖放到另一个Div的文本框中。
如上图所示，我必须从div1和div2中拖动文本/单词并拖放到DIV2中的TEXT BOX中
如何在我的项目的html页面中创建此函数？
编辑:: 18_7_2014
实现Pranav解决方案后，我的代码如下
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$(".draggable").draggable({
revert: true,
helper: 'clone',
start: function(event, ui) {
$(this).fadeTo('fast', 0.5);
},
stop: function(event, ui) {
$(this).fadeTo(0, 1);
}
});
$("#droppable").droppable({
drop: function(event, ui) {
this.value = $(ui.draggable).text();
}
});
});
</script>
</head>
<body>
<div id="sub_cag" style="display:none; margin-left:35px; margin-top:25px; font-family:Arial, Helvetica, sans-serif;">
<span class="draggable" >sub</span><br>
<span class="draggable" >sub</span><br>
<span class="draggable" >sub</span><br>
<span class="draggable" >sub</span><br>
<span class="draggable" >sub</span><br>
<span class="draggable" >sub</span><br>
</div>
<div id="droppableHolder" style=" height:400px; width:580px; margin:10px; ">
<div style="height: 250px; width:580px; margin:0px;">
<div style=" height:60px; width:250px; margin-top:50px; float:; margin-left:0px;">
<label for="departmant_name" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;">Department Name</label>
<input type="text" maxlength="25" id="droppable" style="width:200px;float:left;font-size: 12px;font-size: 12px;height: 15px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;">
</div>
<div style=" height:60px; width:250px; margin-top:0px; float:left; margin-left:0px;">
<label for="discription" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;">Discription</label>
<input type="text" maxlength="25" id="droppable" style="width:200px;font-size: 12px;font-size: 12px;height: 40px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;">
</div>
<div style=" height:60px; width:220px; margin-top:-60px; float:right; margin-left:0px;">
<label for="sub_department" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;">Sub Department</label>
<input type="text" maxlength="25" id="droppable" style="width:200px;font-size: 12px;font-size: 12px;height: 15px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;">
<button value="ADD" style="height:20px; width:40px; margin-top:px;"> </button>
</div>
</body>
当浏览器尝试执行此行$(document).ready(function()。
控制台生成此“未定义$”错误。
最佳答案
我认为您正在寻找这样的东西:
$(function() {
$(".draggable").draggable({
revert: true,
helper: 'clone',
start: function(event, ui) {
$(this).fadeTo('fast', 0.5);
},
stop: function(event, ui) {
$(this).fadeTo(0, 1);
}
});
$("#droppable").droppable({
drop: function(event, ui) {
this.value = $(ui.draggable).text();
}
});
});
小提琴:http://jsfiddle.net/5DCZw/941/