Question

我目前有3列，在其中一列中我有3个面板。当我尝试将一个面板从一个列拖到另一个面板时，它会拖动所有面板。

这是拖放的javascript

    var dragSrcEl = null;

function handleDragStart(e) {

    checkEmptyPanelContainers();
    // Target (this) element is the source node.
    this.style.opacity = "1.0";

    dragSrcEl = this;

    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", this.innerHTML);
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
    }

    e.dataTransfer.dropEffect = "move";  // See the section on the DataTransfer object.

    return false;
}

function handleDrop(e) {
    // this/e.target is current target element.

    if (e.stopPropagation) {
        e.stopPropagation(); // Stops some browsers from redirecting.
    }

    // Don't do anything if dropping the same column we're dragging.
    if (dragSrcEl != this) {
        // Set the source column's HTML to the HTML of the column we dropped on.
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData("text/html");
        $(this).closest(".col-md-4.column").removeClass("expand-panel");
        checkEmptyPanelContainers();
        drawChart();
    }

    return false;
}

var columns = document.querySelectorAll(".column");

[].forEach.call(columns, function (column) {
    column.addEventListener("dragstart", handleDragStart, false);
    column.addEventListener("dragover", handleDragOver, false);
    column.addEventListener("drop", handleDrop, false);
});

这是html

<div class="row" id="columns">
<div class="col-md-4 column" id="col1">
    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body" id="testchart">
            CHART GOES HERE
        </div>
    </div>

    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body">
            World
        </div>
    </div>

    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body">
            Hello
        </div>
    </div>
</div>
<div class="col-md-4 column" id="col2">

</div>
<div class="col-md-4 column" id="col3">

</div>

Answer 1

将拖动事件侦听器绑定到面板：

var temp = ConfigurationManager.AppSettings["data"];

Javascript拖动整列

1 个答案: