使用 Jquery 进行拖放/文本编辑答案

【问题标题】：Drag and Drop / text editing with Jquery使用 Jquery 进行拖放/文本编辑
【发布时间】：2015-10-23 16:22:26
【问题描述】：

我要问一个关于 jquery 的问题。我是 jquery 的新手，发现了一些代码来拖放文本。我想在文本框中输入文本获取其值，然后拖放写入的文本。

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

问题是这两个脚本完美地在单独的文件中工作。但我必须将它合并到一个文件中。请帮忙

【问题讨论】：

你的意思是你想单独拖放输入的文本内容......？我真的不认为jquery ui draggable 可以直接使用。您只能拖动元素。但是可能会有一些工作让它看起来像我们想要的那样。但在这种情况下，您需要进一步解释，而不仅仅是说“我想合并这两段代码”。阅读How to Ask 可能会有所帮助

标签： javascript jquery html

【解决方案1】：

试试这个。对您的选择器进行了更改。如果您希望在放置后隐藏第一个可拖动对象，只需取消注释 $("#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/

【讨论】：