我做错了什么?请帮助一个输入不起作用。请尝试一下。我想能够在两个输入上都写,并在可拖动的窗口中显示每个输入。我已经坚持了一天,试图找出
$(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">
当您有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">