如何拖放文本

Question

在嘗試構建某些東西之前，我想確定它是否可行。

從文本區域開始，文本區域可以預先填充文本，用戶可以添加/刪除文本。現在，這邊有一些小元素。它們既可以是圖像，也可以是HTML元素，例如按鈕或錨鏈接，無論哪種方式更簡單。用戶可以將元素拖放到文本區域，並將其插入到鼠標光標位置，並通過按下其周圍的現有文本來佔據文本空間（附近的元素也將保留，因此用戶可以放下一秒）。這些元素將作爲一個元素保留，這些元素稍後可以拖動到文檔的其他位置或在將被移除的視圖端口之外。當元素按照需要定位時，元素的位置可以通過某種方法（正則表達式，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

如果你認爲它可以建立和您有任何建議我應該在哪裏開始，請大家指教。

Answer 1

我做了一些非常相似昨天那麼爲什麼不分享:)

我的目標是下降的文本元素在我的文字區域，在兩行文本中間但卻向哪裏會被丟棄的指標。我相信它對你有用！ ;）

$(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'); 
    }); 
}