php - HTML5ドラッグアンドドロップドロップゾーン

Question

ドラッグアンドドロップに問題があります。

私の問題は、ある要素がドロップゾーンにドロップされると、ドロップゾーンdivではなく別の要素に挿入されることがあるということです。

例では、これを非常に見やすくするために、テーブルを非常に大きくしたことがわかります。あるテーブルが別のテーブルの上にドロップされると、他の要素と一緒にドロップゾーンには入りませんが、別のテーブルの中に挿入されます。

いくつかのアイデアがありましたが、それらが機能するかどうかはわかりません。1つは、要素が常にドロップゾーンにドロップされるように、ドロップゾーンの上に大きなdivを挿入できるかどうかです。これは、要素をキャッチしてドロップゾーンに配置するほぼ透明なレイヤーと見なされます。

私の他のアイデアは、divからすべてのデータを取得し、それをすべて文字列に入れ、これを解析してから、すべてのデータをドロップゾーンに戻すことでした。

また、お気づきのように、並べ替えは機能しますが、SafariではなくFirefoxでのみ機能するようです。これは私の最も差し迫った懸念事項ではありませんが、もしあなたがたまたま素晴らしい修正を見たのなら！（ソートは上部のドロップゾーンでのみ機能します）私はjQueryを使いたくありません。

コード：

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Basic drag and drop example</title>

    <style>
    @CHARSET "UTF-8";
table.draggable-word {
    background-color: red;
    padding: 0px;
    border: 1px solid green;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 100%;
    height:50px;
}

.drop-div {
    width: 150px;
    height: 150px;
    border: 3px solid #224163;
    background-color: #AABACC;
    margin-top: 15px;
    text-align: center;
    overflow: auto;
}

[draggable=true] {
    cursor: default;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

table {
     border-color: #600;
    border-width: 0 0 1px 1px;
    border-style: solid;
}
    </style>


    <script>

var user ="";
var multiples = false;
var data;

function dragStartHandler(event,id) {
    event.dataTransfer.setData('Object', event.target.id);
    user = id;
    multiples = true;
     data = event.dataTransfer.getData('Object');
    //multipleDrag(data,"false");

}
function dropHandler(event) {
    preventDefaults(event);
    if (!event.target) {
        alert('we');
        event.target = event.srcElement
    }
    data = event.dataTransfer.getData('Object');
    event.target.appendChild(document.getElementById(data));
    document.getElementById(data).selectedIndex = -1;
    //alert(user);



}
function dragOverHandler(event) {
    preventDefaults(event);
}

function preventDefaults(event) {
    if (event.preventDefault) {
        event.preventDefault();
    }

    try {
        event.returnValue = false;
    }
    catch (exception) {}
}


function dragend(event) {
//    multipleDrag(data,"true");

}

function multipleDrag(data,state){
    document.getElementById(data).setAttribute("draggable", state);
}

function sort(uList)
{
    var listItem = document.getElementById(uList).getElementsByTagName('td');
    var listLength = listItem.length;
    var list = [];

    for(var i=0; i<listItem.length; i++){
        list[i] = listItem[i].id.substring(1,listItem[i].id.length);         
        list.sort(function(a,b) {return parseInt(a) > parseInt(b)})
    }
    for(var i=0; i<listLength; i++){
        listItem[i].firstChild.nodeValue = list[i];
    }



}   

        </script>

</head>

<body>



<div class="drop-div"
     ondragover="dragOverHandler(event);"
     ondrop="dropHandler(event)"
     id="drop-div1" ondragend="sort('drop-div1')"></div>

     <div class="drop-div"
     ondragover="dragOverHandler(event);"
     ondrop="dropHandler(event)"
     id="drop-div2">
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'3');"
     class="draggable-word"id="d3" ondragend="dragend(event);"
     ><tr><td id="d3">3</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d4" ondragend="dragend(event);"><tr><td id="d4">4</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d5" ondragend="dragend(event);"><tr><td id="d5">5</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d6" ondragend="dragend(event);"><tr><td id="d6">6</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d7" ondragend="dragend(event);"><tr><td id="d7" >7</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d8" ondragend="dragend(event);"><tr><td id="d8" >8</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d9" ondragend="dragend(event);"><tr><td id="d9">9</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d10" ondragend="dragend(event);"><tr><td id="d10">10</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d11" ondragend="dragend(event);"><tr><td id="d11">11</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d12" ondragend="dragend(event);"><tr><td id="d12">12</td></tr></table>
     <table  draggable="true"
     ondragstart="dragStartHandler(event,'4');"
     class="draggable-word"
     id="d13" ondragend="dragend(event);"><tr><td id="d13">13</td></tr></table>
</div>
 <div id="print"></div>
</body>
</html>

score 4 · Accepted Answer

drop イベントは子要素で発生しているため、 yourevent.targetが子要素です。これは通常のイベントバブリングであり、予期されることです。

このようにすぐに追加する代わりにevent.target：

event.target.appendChild(document.getElementById(data));

最初に親の dropzone 要素を見つける必要があります。jQuery のようなものがあれば、closestメソッドを使用するだけで、これは非常に簡単です。そうでない場合は、次のようなものが機能します (テストされていないため、おそらくいくつかのバグを解決する必要があります)。

var dropzone = event.target;
while (dropzone.id != 'drop-div1') {
    dropzone = dropzone.parentNode;
}
dropzone.appendChild(document.getElementById(data));

php - HTML5ドラッグアンドドロップドロップゾーン

1 に答える 1

Related

Reference