输入数据到可拖动不工作

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">