javascript - 输入数据到可拖动不起作用

Question

我做错了什么，请帮忙，一个输入不起作用，请尝试一下，我希望能够在两个输入上写入并在可拖动的情况下显示每个输入，我已经在这个问题上坚持了一整天，试图弄清楚

$(function() {
    $( "#draggable" ).draggable();
  });
$("#get").click(function () {

$('#msg').html($('input:text').val());

});

$(function() {
    $( "#draggable" ).draggable();
  });
$("#get1").click(function () {

$('#msg1').html($('input:text').val());

});

<style>#draggable { width: 150px; height: 150px; border: none;padding: none; background: transparent; }

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}
</style>

<input id="fid" type='text'><button id='get'>Get</button>
<input id="fid1" type='text'><button id='get1'>Get</button>

<div class="container">
<div id="draggable" class="ui-widget-content"> <span id='msg'></span></div>

<div id="draggable" class="ui-widget-content"> <span id='msg1'></span></div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <meta charset=utf-8 />
 <title>UI widget</title><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

Answer 1

当您有输入的 Id 时，您可以直接使用它..并且您的 Id 应该是唯一的..所以不要重复 id="draggable" 尝试使用 draggable1 , draggable2

$(function() {
    $( "#draggable1" ).draggable();
    $( "#draggable2" ).draggable();
    $("#get").click(function () {
      $('#msg').html($('#fid').val());
    });
    $("#get1").click(function () {
      $('#msg1').html($('#fid1').val());
    });
});

<style>#draggable { width: 150px; height: 150px; border: none;padding: none; background: transparent; }

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}
</style>

<input id="fid" type='text'><button id='get'>Get</button>
<input id="fid1" type='text'><button id='get1'>Get</button>

<div class="container">
<div id="draggable1" class="ui-widget-content"> <span id='msg'></span></div>

<div id="draggable2" class="ui-widget-content"> <span id='msg1'></span></div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <meta charset=utf-8 />
 <title>UI widget</title><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

如果您需要附加输出，则需要使用 .append() 而不是 .html() .. 像这样

$(function() {
    $( "#draggable1" ).draggable();
    $( "#draggable2" ).draggable();
    $("#get").click(function () {
      $('#msg').append($('#fid').val());
    });
    $("#get1").click(function () {
      $('#msg1').append($('#fid1').val());
    });
});

<style>#draggable { width: 150px; height: 150px; border: none;padding: none; background: transparent; }

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}
</style>

<input id="fid" type='text'><button id='get'>Get</button>
<input id="fid1" type='text'><button id='get1'>Get</button>

<div class="container">
<div id="draggable1" class="ui-widget-content"> <span id='msg'></span></div>

<div id="draggable2" class="ui-widget-content"> <span id='msg1'></span></div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <meta charset=utf-8 />
 <title>UI widget</title><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">