divでドラッグアンドドロップjquery UI、またはdivに

Question

私のドラッグとの2つの問題がliのdivへのドロップには問題があります。

最初に、私はdivにテキストをドロップしていますが、うまくいきません。私は行の中の文字を判別するためのより良い関数が必要です。

第2 - 私はdivに既にドロップされた要素の上に要素をドロップするたびに、私は別のものにドロップすると、その要素の終わりまたは最初の位置を与える機能が必要です。

ここで問題を見るのに役立つフィドルです。 Link to fiddle

ここでの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/4mqvequ8/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()を適用する方が簡単だとわかりました。新しい単語が削除されたら、すべての要素を1つのテキストブロックに戻します。

これは改行などを壊す可能性があります。