使用jQuery拖放/文本编辑

Question

I have to ask a question about jquery. I am new to jquery and found some code to drag and drop a text. i want to input a text in text box get its value and then drag and drop the text written.

 <script type="text/javascript"> $("button:#Get").click(function () { $('#msg').html($('input:text').val()); }); $("button:#Reset").click(function () { $('#msg').html(""); $('input:text').val(""); }); $("button:#Set").click(function () { $('input:text').val("ABC"); $('#msg').html($('input:text').val()); }); $(function() { $( "#msg" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script> 

 <div style="padding:16px;"> TextBox : <input type="text" value="Type something"></input> </div> <button id="Get">Get TextBox Value</button> <button id="Set">Set To "ABC"</button> <button id="Reset">Reset It</button> <div id="msg" class="ui-widget-content"> <p></p> </div> 

The problem is that these two scripts works in separate files perfectly. But i have to merge it in a single file. Please help

Answer 1

Try this. Made changes to your selectors. If you wish to hide 1st draggable after the drop, just uncomment $("#msg").hide()

<div style="padding:16px;">
    TextBox : <input type="text" value="Type something"></input>
</div>

<button id="Get">Get TextBox Value</button> 
<button id="Set">Set To "ABC"</button> 
<button id="Reset">Reset It</button>


<div id="msg" class="ui-widget-content" style="border: 1px solid">
  <p></p>
</div>
<br>
    <br>
<div id="droppable" class="ui-widget-content" style="border: 1px solid">
  <p>Drag and drop here</p>
</div>

$("#Get").click(function () {   
    $('#msg').html($('input:text').val());
});

    $("#Reset").click(function () {

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

    });

    $("#Set").click(function () {

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

    });


    $( "#msg" ).draggable();
    $( "#droppable").droppable({
      drop: function( event, ui ) {
        var $text = $("#msg").text();
        $( this ).addClass( "ui-state-highlight" ).find( "p" ).html($text);
       // $("#msg").hide();
      }
    });

http://jsfiddle.net/7ck1m7q1/3/