拖放jQuery UI，将文本放入DIV中的第二或 行

Question

我将li的拖动拖放到div。

有两个问题。

首先 - 我将文本放入DIV中，并且它不太好，我需要一个更好的功能来确定行中的字符。

second-每当我将一个元素放在DIV中的一个已删除元素上时，我需要一个函数，如果我放在另一个元素上，它会使我在该元素的末端或开始。

在这里，小提琴可以帮助查看问题。链接到小提琴

在这里jQuery代码：

var i = 0;
$(".draggable").draggable({
  connectToSortable: '#fullText',
  revert: "invalid",
  helper: "clone",
  cursor: "pointer"
});
$("#createButton").click(function(e) {
  $("#draggableList ul").append('<li  class="draggable" style="border:1px solid;padding:1px 5px" >' + $('#word').val() + '</li>');
  $(".draggable").draggable({
    connectToSortable: '#fullText',
    revert: "invalid",
    helper: "clone",
    cursor: "pointer"
  });
});

$('#fullText').droppable({
  drop: function(e, ui) {
    var height = $('#fullText').height();
    var line_height = $('#fullText').css('line-height');
    line_height = parseFloat(line_height);
    var lines = height / line_height;
    var height = $('#fullText').height();
    var lineHeight = $('#fullText').css('line-height');
    lineHeight = parseFloat(lineHeight);
    var dropPositionX = event.pageX - $(this).offset().left;
    var dropPositionY = event.pageY - $(this).offset().top;
    // Get mouse offset relative to dragged item:
    var dragItemOffsetX = event.offsetX;
    var dragItemOffsetY = event.offsetY;
    // Get position of dragged item relative to drop target:
    var dragItemPositionX = dropPositionX - dragItemOffsetX;
    var dragItemPositionY = dropPositionY - dragItemOffsetY;
    var lineNo = Math.round(dragItemPositionY / lineHeight);
    var charWidth = getCharWidth(this);
    var charactersinline = Math.round($('#fullText').width() / charWidth);

    //var chartPerrRow=Math.round(length/lineNo);
    // var el = document.getElementById("fullText"), 
    // lines = el.innerHTML.split("n");

    var position = (Math.round(ui.offset.left / charWidth));
    position = position + (charactersinline * (lineNo));
    position = (position - 1 >= 0) ? position - 1 : position;
    i += 1;
    ui.draggable.remove();
    document.getElementById('fullText').innerHTML = $(this).html().substr(0, position + 1) + '<p style="padding:0; margin:0;display:inline;" id="' + i + '" contenteditable="false"  class="draggableP" > ' + ui.draggable.text() + '</p> ' + $(this).html().substr(position + 1);

    $(".draggableP").draggable({
      connectToSortable: '#fullText',
      revert: "invalid"
    });
    ui.draggable.remove();
  },
  out: function(event, ui) {
    // alert("out");
  },
  over: function(event, ui) {
  }
});

function getCharWidth(ele) {
  var f = window.getComputedStyle(ele)['font'],
    o = $('<div>' + ele.textContent + '</div>')
    .css({
      'position': 'absolute',
      'float': 'left',
      'white-space': 'nowrap',
      'visibility': 'hidden',
      'font': f
    })
    .appendTo($('body')),
    w = o.width() / ele.textContent.length;
  o.remove();
  return w;
}

谢谢

Answer 1

这有点不清楚您要完成的工作。这可能对您有用，但也可能也不是您想要的。无论哪种方式，都应该有所帮助。

工作示例：https：//jsfiddle.net/twisty/4mqvequequ8/7/

javascript

$(function() {
  var $fT = $("#fullText");
  function makeDrag($item) {
    $item.draggable({
      revert: "invalid",
      helper: "clone",
      cursor: "pointer",
      start: function(e, ui) {
      console.log("Drag Start to: " + $fT.attr("id"));
        makeDrop($fT);
      }
    });
  }
  function makeDrop($item) {
    if ($item.hasClass("noEdit")) {
      console.log("No Edit found.");
      return false;
    }
    $item.addClass("noEdit").attr("contenteditable", false);
    console.log("Splitting words into elements.");
    var words = $item.text().split(" ");
    $item.html("");
    console.log(words);
    var i = 0;
    $.each(words, function(k, v) {
      var w = $("<span>", {
        class: "word word-" + k
      }).html(v + " ");
      w.appendTo($item);
      i++;
    });
    console.log("Created " + i + " word elements.");
    console.log("Making word elements droppable.");
    $item.find(".word").droppable({
      drop: function(e, ui) {
        var newWord = ui.draggable.text();
        console.log("Drop Event for: " + newWord);
        $(this).after($("<span>", {
          class: "new word"
        }).html(newWord + " "));
        console.log("Returning word elements to text block.");
        makeText($fT);
      }
    });
  }
  function makeText($item) {
    console.log("Making Texct: " + $item.attr("id") + " From " + $item.find(".word").length + " words.");
    var words = $item.text().trim();
    $item.html(words).removeClass("noEdit").attr("contenteditable", true);
  }
  makeDrag($(".draggable"));
  $("#createButton").click(function(e) {
    var $li = $("<li>", {
      class: "draggable"
    }).html($('#word').val());
    $("#draggableList ul").append($li);
    makeDrag($li);
  });
});

使用可以拖动的单词列表，用户可以：

• 将一个单词拖到段落中，该单词被删除在
上后将附加该单词
• 创建要添加到列表的新单词

没有一个很好的方法将元素或文本附加到现有文本的一个块中。我们可以制作一系列文本项目，并将新项目添加到该数组中，但是这变得非常困难，无法将鼠标置液位置与字符串中的位置相关联。

我认为将每个单词转换为HTML元素会更容易，然后将.droppable()应用于每个元素。一旦掉下一个新单词，将所有元素返回一个文本块。

这可能会打破诸如换行符之类的东西。