0

何かを構築しようとする前に、それが可能かどうかを判断したいと思います。

テキストを事前入力でき、ユーザーがテキストを追加/削除できるテキスト領域から始めます。さて、横にいくつかの小さな要素があります。画像でも、ボタンやアンカー リンクなどの HTML 要素でも、どちらでもかまいません。ユーザーは要素をテキスト領域にドラッグできます。要素はマウス カーソルの位置に挿入され、周囲の既存のテキストを押すことでテキスト スペースを占有します (近くの要素も残るため、ユーザーは 1 秒ドロップできます)。要素は要素として残り、後でドキュメント内の別の場所にドラッグしたり、削除されるビューポートの外にドラッグしたりできます。要素が必要に応じて配置されると、要素の場所を何らかの手段 (regex、dom など) で識別できるため、別のコンテンツに置き換えることができます。

改行が必要になります。理想的には、jQuery および IE7+ で動作しますが、IE7 の要件を変更する必要がある場合があります。

私は次のものに出くわしましたが、これらは近いですが完全ではありません。

構築可能で、どこから始めるべきか提案がある場合は、アドバイスをお願いします。

4

1 に答える 1

2

私は昨日非常に似たようなことをしたので、共有してみませんか:)

私の目標は、テキストの要素をテキスト領域の 2 行のテキストの真ん中にドロップし、ドロップされる場所を示すインジケーターを表示することでした。私はそれがあなたに役立つと信じています！;)

$(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');
    });
}
于 2016-11-08T14:29:18.337 に答える