CODEWITHSUNDEEP
javascriptjqueryhtml
fidel
fidel

Reputation: 89

input data to draggable not working

what am i doing wrong please help one input is not working please try it i want to be able to write on both inputs and display each one in a draggable ive been stuck on this for day trying to figure it out

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

Upvotes: 0

Views: 44

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

While you have Ids to inputs you can use it directly .. and your Ids should be unique .. so don't duplicate id="draggable" try to use 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">

if you need to append the output you need to use .append() instead of .html() .. like this

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

Upvotes: 1

Related Questions