Question

我正在尝试构建一个可以使用jQuery的拖放功能处理的文本编辑器。我已经能够构建可拖动的项目，例如文本框，图像（暂时占位符），并将它们放在可排序的容器中;并删除任何丢弃垃圾桶或删除栏的元素。但是，执行拖放的方式看起来有点尴尬。例如，当我将一个可拖动项目从其容器中拖出时，容器会在我拖动时展开;容器中可拖放的项目的排序方式看起来与我从其他示例中看到的有点不同。如何解决这些问题呢？ jQuery的可拖动/可排序声音是否适合用于此项目？

一旦我完成了这个问题，我就计划实现允许用户选择颜色，文本对齐方式，图像来源以及最终投票功能的功能。此外，我希望能够使用文本编辑器导出任何用户构建，以保存在db中并发布。我可以就如何处理这些问题得到一些好的想法吗？

我在这里附上了jsFiddle和代码。非常感谢你的帮助！

https://jsfiddle.net/WooS/907vzp09/

Snippet（点击打开，隐藏起来以获得更好的视觉效果）：

＆＃13;

var elementID = "";
const textBox = "<input type=\"text\" class=\"draggable\" value=\"text...\">";
const imageBox = "<img class=\"img-fluid draggable\" src=\"http://placehold.it/300x200\" alt=\"\">";
const stickerBox = "<img class=\"img-fluid draggable\" src=\"http://placehold.it/50x50\" alt=\"\">";


$(document).ready(function(){
    //resizable and draggable text box
    $("#container").sortable({
        revert: true
    });

    //add textbox when dragging TEXT
    $("#textDrag").mousedown(function(){
        elementID = "text";
        console.log(elementID);
    });

    //add imagebox when dragging IMAGE
    $("#imageDrag").mousedown(function(){
        elementID = "image";
        console.log(elementID);
    });

    //add sticker when dragging STICKER
    $("#stickerDrag").mousedown(function(){
        elementID = "sticker";
        console.log(elementID);
    });

    //remove dropped elements
    $('#removeDrop').droppable({
        over: function(event, ui) {
            ui.draggable.remove();
        }
    });

    $('.dragItem').draggable({
        connectToSortable: "#container",
        revert: "invalid",
        helper: function(){
            if(elementID=="text")
                return textBox;
            else if(elementID=="image")
                return imageBox;
            else
                return stickerBox;
        }
    });
})

＆＃13;

/* general layout styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.dragDrop {
    height: 100%;
    width: 20%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.dragDrop a {
    color: white;
    padding: 16px;
    text-decoration: none;
    display: block;
}

.dragDrop a:hover {
    background-color: #ddd;
    color: black;
}

.content {
    margin-left: 20%;
    padding: 0 1rem;
}


/***************************************************/
/* dragDrop div elements styles */
.dragDrop div {
    width: 100%;
    height: 100%;
    color: white;
    padding: 1rem;
    text-align: center;
}

.dragDrop div:hover {
    background-color: #ddd;
    color: black;
}

.dragItem div {
    height: auto;
}

.dragItem {
    display: flex;
    justify-content: center;
    align-items: center;
}


/***************************************************/
/* content div elements styles */
#container {
    max-width: 100%;
    min-height: 30rem; 
    height: auto;
    margin-top: 1rem;
    padding-bottom: 1rem;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#subject{
    width: 100%;
}

.draggable{
    margin-top: 1rem;
}

input.draggable{
    min-width: 100%;
    max-width: 100%;
    min-height: 5rem;
}

#buttonContainer{
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 3rem;

    display: flex;
    justify-content: space-between;
}

#removeDrop{
    background-color: black;
    color: white;
    height: 7rem;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

＆＃13;

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- Draggable Side Bar -->
<div class="dragDrop bg-dark">
    <div draggable="true" class="dragItem" id="textDrag">
        <div>TEXT</div>
    </div>
    <div draggable="true" class="dragItem" id="imageDrag">
        <div>IMAGE</div>
    </div>
    <div draggable="true" class="dragItem" id="stickerDrag">
        <div>STICKER</div>
    </div>
</div>

<!-- Content Space for Users -->
<div class="content">
    <div id="buttonContainer" class="btn-group-justified">
        <a href="article_list.html" class="btn btn-primary" role="button">Back</a>
        <a href="article.html" class="btn btn-primary" role="button">Post</a>
    </div>
    <input type="text" id="subject" placeholder="Subject"/>
    <div id="container" class="ui-widget-content">
        <!--
            <input type="text" class="draggable" value="text...">
        -->
    </div>
    <div draggable="true" id="removeDrop" class="bg-dark">
        <div>REMOVE</div>
    </div>
</div>

＆＃13;

可拖动文本编辑器

0 个答案: