使用Jquery进行拖放/文本编辑
Drag and Drop / text editing with Jquery
我必须问一个关于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>
问题是这两个脚本在单独的文件中完美地工作。但我得把它合并到一个文件里。请帮忙
试试这个。对选择器进行了更改。如果你想在拖放后隐藏第一个可拖动项,只需取消注释$("#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/相关文章:
- 有没有一种方法可以在画布中拖放文本或图像
- HTML5拖放:使用JavaScript在文本框中加载文本文件
- 在拖动/拖放事件上获取 Firefox 内容可编辑的拖放光标位置
- AngularJS拖放可编辑
- 添加文本工具,在Html5画布上拖放并调整其大小
- 将拖放链接拖放到仅包含文本的文本框中
- ExtJs 4 - 如何拖放文本(或文本区域)字段的内容
- CKEDITOR 拖放插件集成在编辑器实例销毁并重新创建后停止工作
- HTML5 拖放 - 将选择文本拖放到可拖放元素
- JQuery UI拖放(获取Draggable值以显示和隐藏文本区域框)
- 拖放html元素或编辑器
- 在父容器上使用克隆的Jquery拖放照片编辑器
- 使用Jquery进行拖放/文本编辑
- Raphael JS:文本元素向错误的方向拖放
- 我如何使用JQuery's拖放文本框
- 在可拖放的UL/LI中编辑输入
- 拖放图像不工作在tinymce文本编辑器
- 为孩子们创建一个JavaScript拖放编辑器,想要包含JSHint来检查语法-我该怎么做呢?
- 如何在文本区域内禁用拖放文本
- 在Summernote文本编辑器中拖放图像