Siteye Drag and Drop eklemek

JavaScript
1

Merhabalar,

Siteme upload sitelerinde olan sürükle bırak özelliğini eklemek istiyorum ama javascript dışında dil bilmiyorum (javascript’te yeniyim zaten) . Bununla alakalı yardımcı olabilir misiniz?

3

Merhaba,

Aşağıdaki basit drag and drop uygulamasına bakarak fikir edinebilirsiniz:

<div id="id1" draggable="true" style="position: absolute;">Test</div>
<div id="id2" style="width: 100%; height: 100%;"></div>
<script>
    var id1 = document.getElementById("id1");
    var id2 = document.getElementById("id2");
    id2.ondragover = function (e) { e.preventDefault(); }
    id2.ondrop = function (e) {
        id1.style.top = e.clientY;
        id1.style.left = e.clientX;
    }
</script>

Aşağıdaki linki de ziyaret etmenizi tavsiye ederim.

4

Aşağıda başka bir drag and drop örneği görüyorsunuz. Bu örnekte 10 tane drag and drop özelliği olan buttonlar oluşturuyoruz.

<div id="container" style="width: 100%; height: 100%;"></div>
<script>
    class DraggableObj {
        constructor(type, id, parent, innerHTML, left) {
            this.widget = document.createElement(type);
            this.widget.draggable = "true";
            this.widget.innerHTML = innerHTML;
            this.widget.id = id;
            this.widget.style.left = left;
            this.widget.style.position = "absolute";
            this.widget.ondragstart = function (e) { parent.active_id = id; }
            parent.append(this.widget);
        }
    }
    var container = document.getElementById("container");
    for (var i = 0; i < 10; i++) {
        new DraggableObj("button", `btn-${i}`, container, `Draggable Button ${i}`, i * 150);
    }
    container.ondragover = function (e) { e.preventDefault(); }
    container.ondrop = function (e) {
        document.getElementById(e.target.active_id).style.top = e.clientY;
        document.getElementById(e.target.active_id).style.left = e.clientX;
    }
</script>
5

teşekkür ederim çok yardımı oldu :blush: