在HTML页面上拖放元素到文本框中出现问题？

Question

在HTML页面上拖放元素到文本框中出现问题？

javascriptjqueryhtmlcss

3

我希望能够拖放一个Div中的元素到另一个Div的文本框中，如下图所示。需要从div1和div2中拖动文本/单词并将其放置到DIV2的文本框中。

想知道如何在我的项目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() 时，控制台会生成"$ is not defined"错误。

- user26697

3个回答

1

在上面的答案中，他们使用Id元素作为可拖放div部分的标识。 Id是唯一的，因此我们将其替换为Class，这将有助于根据您的要求放置更多的div框。

这是我的更新代码：

$(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/942/

- Sankar Jay

0

你需要在你的代码中添加 "jquery.min.js" 脚本文件。

- Twix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pranav · Accepted Answer

我认为您是在寻找类似于以下内容的东西：

$(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();
        }
    });
});

Fiddle: http://jsfiddle.net/5DCZw/941/

（注：该文本为HTML代码，保留了链接和标签的格式）