在尝试构建某些东西之前,我想确定它是否可行。
从一个文本区域开始,该区域可以预先填充文本,并且用户可以在其中添加/删除文本。现在,旁边有一些小元素。它们可以是图像或 HTML 元素,例如按钮或 anchor 链接,无论哪种更简单。用户可以将元素拖到文本区域中,它将被插入到鼠标光标位置,并通过插入其周围的现有文本来占用文本空间(附近的元素也将保留,以便用户可以放下第二个元素)。这些元素将保留为元素,稍后可以将其拖动到文档中的其他位置或将其删除的 View 端口之外。当元素根据需要定位时,可以通过某种手段(regex、dom等)来识别元素的位置,以便可以用不同的内容替换它们。
需要换行。理想情况下,它可以与 jQuery 和 IE7+ 一起使用,但是,IE7 的需求可能需要更改。
我遇到过以下内容,它们很接近,但不完全一样。
- http://skfox.com/jqExamples/insertAtCaret.html
- http://jsbin.com/egefi (引用jQuery Drag & Drop into a Text Area)
- http://jqueryui.com/droppable/#method-option
如果您认为它可以构建并且您对我应该从哪里开始有建议,请提出建议。
最佳答案
我昨天做了一些非常相似的事情,所以为什么不分享:)
我的目标是将文本元素拖放到我的文本区域中,位于两行文本的中间,同时显示要放置的位置的指示器。我相信它会对你有用! ;)
$(document).ready(function() {
var lineHeight = parseInt($('#textarea').css('line-height').replace('px',''));
var previousLineNo = 0;
var content = $('#textarea').val();
var linesArray = content.length > 0 ? content.split('\n') : [];
var lineNo = 0;
var emptyLineAdded = false;
$('.draggable').draggable({
revert: function(is_valid_drop) {
if (!is_valid_drop) {
$('#textarea').val(content);
return true;
}
},
drag: function(event, ui) {
lineNo = getLineNo(ui, lineHeight);
if (linesArray.length > 0 && previousLineNo != lineNo) {
insertWhiteLine(lineNo, linesArray);
}
previousLineNo = lineNo;
}
});
$("#textarea").droppable({
accept: ".draggable",
drop: function( event, ui ) {
appendAtLine(lineNo, linesArray, ui.draggable.text());
$(ui.draggable).remove();
content = $('#textarea').val();
linesArray = content.split('\n');
if (linesArray[linesArray.length - 1] == '')
linesArray.pop(); //remove empty line
}
});
$('#textarea').on('input', function() {
if (!emptyLineAdded) {
console.log('input !');
console.log($('#textarea').val());
content = $('#textarea').val();
linesArray = content.split('\n');
if (linesArray[linesArray.length - 1] == '')
linesArray.pop(); //remove empty line
}
});
});
//Returns the top position of a draggable element,
//relative to the textarea. (0 means at the very top of the textarea)
function getYPosition(element, lineHeight) {
var participantIndex = $(element.helper.context).index();
var initPos = participantIndex * lineHeight;
var actualPos = initPos + element.position.top;
return actualPos;
}
//Returns the line number corresponding to where the element
//would be dropped
function getLineNo(element, lineHeight) {
return Math.round(getYPosition(element, lineHeight) / lineHeight);
}
//Inserts a white line at the given line number,
//to show where the element would be dropped in the textarea
function insertWhiteLine(lineNo, linesArray) {
$('#textarea').val('');
$(linesArray).each(function(index, value) {
if (index < lineNo)
$('#textarea').val($('#textarea').val() + value + '\n');
});
emptyLineAdded = true;
$('#textarea').val($('#textarea').val() + '_____________\n'); //white line
emptyLineAdded = false;
$(linesArray).each(function(index, value) {
if (index >= lineNo)
$('#textarea').val($('#textarea').val() + value + '\n');
});
}
//Inserts content of draggable at the given line number
function appendAtLine(lineNo, linesArray, content) {
$('#textarea').val('');
$(linesArray).each(function(index, value) {
if (index < lineNo)
$('#textarea').val($('#textarea').val() + value + '\n');
});
$('#textarea').val($('#textarea').val() + content + '\n'); //content to be added
$(linesArray).each(function(index, value) {
if (index >= lineNo)
$('#textarea').val($('#textarea').val() + value + '\n');
});
}
关于javascript - 如何拖放到文本中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13692328/