Question

我有下面的脚本：

HTML

<div id="left">
  <div>Orange Div</div>
  <div>
   <div class="left_text">top</div>
   <div class="left_text">left</div>
    <textarea class="count2"> </textarea>
    <textarea  class="count1"> </textarea>
   <div style="clear: both;"></div>
   <button id="getText1">Move</button>
  </div>
</div>
<div id="red_div">
 <div id="green_div">
  <div id="orange_div">
   <h3>Orange Div</h3>
  </div>
 </div>
</div>

CSS

#left{
width: 150px; 
height: 80px; 
float:left;}

.left_text{
color: red;
height:20px; 
width:50px; 
float:left;}

textarea.count1, textarea.count2 {
color: red; 
height:20px; 
width:50px; 
float:left;}

#red_div{
margin: auto; 
width: 300px; 
height: 450px; 
float:left;
border: 1px solid ccc;
background-color: red;}

#green_div { 
width: 300px; 
height: 200px; 
float: left; 
display: block; 
position: relative; 
background-color: green;
border: 1px solid ccc;
margin-top: 100px;}

#orange_div { 
width: 100px; 
height: 100px; 
float: left; 
font-size: 16px;
font-family: Arial;
background-color: orange;}

JQUERY

 $( "#orange_div" ).resizable().draggable({
  containment: "#green_div",
   scroll: false,
    drag: function(event) {
        o = $(this).offset();
        p = $(this).position();
        $('.count1').html(p.left);
        $('.count2').html(p.top);
    }
});

function updateCoordinate(newCoordinate) {
    $(".count1").text(newCoordinate);
    $(".count2").text(newCoordinate);
}
    $("#getText1").click(function () {
    $("#orange_div").offset({ 
    top: $('.count2').text(), 
    left: $('.count1').text()
    });
});

演示在这里：

http://jsfiddle.net/emilsifu/zPHhp/4/

当用户从左侧输入textarea中的值时，我需要将橙色div放在绿色div中。橙色div是可拖动的。

取而代之的是，它位于左上角。

感谢您的帮助！

Answer 1

将html（）和text（）函数更改为jQuery val（）函数并结合上面的@jdpatel answer似乎解决了这个问题。因为它是一个文本区域，所以只读取和写入该字段的值似乎更安全。

$(document).ready(function()
 {

  $( "#orange_div" ).resizable().draggable({
  containment: "#green_div",
   scroll: false,
    drag: function(event) {
        o = $(this).offset();
        p = $(this).position();
        $('.count1').val(p.left);
        $('.count2').val(p.top);
    }
});

function updateCoordinate(newCoordinate) {
    $(".count1").val(newCoordinate);
    $(".count2").val(newCoordinate);
}
    $("#getText1").click(function () {
    $("#orange_div").offset({ 
    top: $('.count2').val(), 
    left: $('.count1').val()
    });
}); 

});

/ 修改 /

当我稍后测试它时，它的功能再次不同，我似乎无法找到原因。我找到了一种方法，使它始终保持在绿色框中，从不将自身附加到身体上，但输入的左值仅在之前完成拖动后应用。我找不到CSS差异，类差异......这一切现在都有效，但只能在拖动之后。

    $(document).ready(function(){

        $( "#orange_div" ).resizable().draggable({
        containment: "#green_div",
        scroll: false,
        drag: function(event) {
            o = $(this).offset();
            p = $(this).position();
            $('.count1').val(p.left);
            $('.count2').val(p.top);
        }
    });

function updateCoordinate(newCoordinate) {
    $(".count1").val(newCoordinate);
    $(".count2").val(newCoordinate);
}
$("#getText1").click(function (event) {
   event.preventDefault();
    $("#orange_div").css({ 
        top : $('.count2').val() + "px",
        left : $('.count1').val() + "px"
    });
}); 

});

Answer 2

你必须添加下面给出的其他javascript

http://code.jquery.com/ui/1.11.0/jquery-ui.js

并在文档中编写函数就像..它的工作..！

$(document).ready(function()
 {

  $( "#orange_div" ).resizable().draggable({
  containment: "#green_div",
   scroll: false,
    drag: function(event) {
        o = $(this).offset();
        p = $(this).position();
        $('.count1').html(p.left);
        $('.count2').html(p.top);
    }
});

function updateCoordinate(newCoordinate) {
    $(".count1").text(newCoordinate);
    $(".count2").text(newCoordinate);
}
    $("#getText1").click(function () {
    $("#orange_div").offset({ 
    top: $('.count2').text(), 
    left: $('.count1').text()
    });
}); 

});

如何使用textarea中的值将div放在另一个div中

2 个答案: