将数据输入到draggable无法工作

input data to draggable not working

本文关键字：工作 draggable 数据 输入      更新时间：2023-09-26

我做错了什么？请帮助一个输入不起作用。请尝试一下。我想能够在两个输入上都写，并在可拖动的窗口中显示每个输入。我已经坚持了一天，试图找出

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

相关文章：