Yêu cầu thg 8 10, 2020 2:13 SA 198 0 1
  • 198 0 1
+2

Drag & Drop Jquery

Chia sẻ
  • 198 0 1

Xin chào mọi người!

Em có đoạn code như bên dưới ạ! Với mong muốn là kéo & thả các thẻ div vào trong khu vực textarea, nhưng hiện tại em đang bối rối cách nào để tính được vị trí của các chữ để kéo thả cho đúng ạ? Hiện tại code của em chỉ kéo thả đúng sau vị trí chữ đầu tiên.

Rất mong các cao nhân chỉ giáo cho em với ạ! Em cám ơn các cao nhân!

<fieldset>
    <legend>Data Area</legend>
    <div class="btn btn-info draggable">Text 1</div>
    <div class="btn btn-info draggable">Text 2</div>
</fieldset>

<br />

<div class="form-group">
    @Html.TextArea("MessageArea", (string)ViewBag.Content, new { @class = "form-control", @style = "min-width: 100%", @rows = 15 })
    <br />
    <input type="button" class="btn btn-success" value="SAVE" onclick="return SaveTemplate()" />
    <input type="button" class="btn btn-warning" value="CLEAR" onclick="$('#MessageArea').val('');" />
</div>


<script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        let arr = [];

        $(".draggable").draggable({
            revert: true,
            helper: 'clone',
            start: function (event, ui) {
                $(this).fadeTo('fast', 0.5);
            },
            stop: function (event, ui) {
                $(this).fadeTo(0, 1);
            }
        });

        $("#MessageArea").droppable({
            hoverClass: 'active',
            drop: function (event, ui) {                  
                let arr = this.value.split(" ");
                let insertedArr = insertAfterWord(arr, "Type", " *" + $(ui.draggable).text() + "* ");
                let stringified = insertedArr.join(" ")
                this.value = stringified;
            },
        });
    });


    function insertAfterWord(arr, wordToFind, wordToInsert) {
        console.log(arr)
        let i = arr.indexOf(wordToFind);
        console.log(i);
        if (i > -1) {
            arr.splice(i + 1, 0, wordToInsert);
        }
        return arr;
    } 

    function SaveTemplate() {
        $.ajax({
            type: "POST",
            url: "/Home/DownloadTXTFile",
            data: { Content: $("#MessageArea").val() },
            success: function (result) {
                if (result == 1) {
                    alert("Saved file");
                }
                else {
                    alert(result);
                }
            }
        });
    }
</script>

1 CÂU TRẢ LỜI


Đã trả lời thg 8 27, 2020 10:40 SA
Đã được chấp nhận
0

Đây là đường link câu trả lời ạ: https://nadblog.home.blog/2020/08/27/keo-va-tha-du-lieu-toi-textarea/

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí