function makeDraggable(element, port, container, ports) {
    var dragHandle = E('div', {
        'class': 'drag-handle',
        'style': 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: move; z-index: 1; pointer-events: none;',
        'title': _('Hold to drag and reorder')
    });

    element.style.position = 'relative';
    element.appendChild(dragHandle);

    var clickTimer = null;
    var clickStart = null;
    var hasMoved = false;

    // Funkcja dla obsługi przeciągania
    function startDrag(ev) {
        isDragging = true;
        draggedElement = element;
        poll.stop();

        element.style.opacity = '0.5';
        element.style.zIndex = '1000';
        dragHandle.style.cursor = 'move';
        dragHandle.style.pointerEvents = 'auto';

        document.body.style.cursor = 'move';

        var boxes = Array.from(container.children);
        var placeholder = E('div', {
            'class': 'ifacebox drag-placeholder',
            'style': element.style.cssText + 'opacity: 0.3; border: 3px dashed var(--border-color-medium); background: var(--border-color-low);'
        });

        element.style.boxShadow = '0 5px 15px var(--border-color-strong)';

        // Przeciąganie - detekcja ruchu
        function onMouseMove(e) {
            var afterElement = getDragAfterElement(container, e.clientX || e.touches[0].clientX);
            if (afterElement == null) {
                container.appendChild(placeholder);
            } else {
                container.insertBefore(placeholder, afterElement);
            }
        }

        // Przeciąganie - detekcja zakończenia
        function onMouseUp(e) {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            document.removeEventListener('touchmove', onMouseMove);
            document.removeEventListener('touchend', onMouseUp);

            var afterElement = getDragAfterElement(container, e.clientX || e.changedTouches[0].clientX);
            if (afterElement == null) {
                container.appendChild(element);
            } else {
                container.insertBefore(element, afterElement);
            }

            if (placeholder.parentNode)
                placeholder.parentNode.removeChild(placeholder);

            element.style.opacity = '1';
            element.style.zIndex = '';
            element.style.boxShadow = '';
            dragHandle.style.cursor = 'move';
            dragHandle.style.pointerEvents = 'none';
            document.body.style.cursor = '';

            /* Refresh ports array order */
            var newOrder = Array.from(container.children).map(function(el) {
                return el.__port__;
            }).filter(function(p) { return p; });

            ports.length = 0;
            newOrder.forEach(function(p) { ports.push(p); });

            saveUserPorts(ports).then(function() {
                isDragging = false;
                draggedElement = null;
                popTimeout(null, E('p', _('Port order saved')), 5000, 'info');
                poll.start();
            }).catch(function(err) {
                isDragging = false;
                draggedElement = null;
                poll.start();
            });
        }

        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
        document.addEventListener('touchmove', onMouseMove);
        document.addEventListener('touchend', onMouseUp);
    }

    // Funkcja dla detekcji elementu, nad którym odbywa się przeciąganie
    function getDragAfterElement(container, x) {
        var draggableElements = Array.from(container.children).filter(function(child) {
            return child !== draggedElement && child.classList.contains('ifacebox');
        });

        return draggableElements.reduce(function(closest, child) {
            var box = child.getBoundingClientRect();
            var offset = x - box.left - box.width / 2;

            if (offset < 0 && offset > closest.offset) {
                return { offset: offset, element: child };
            } else {
                return closest;
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element;
    }

    // Obsługa dla zdarzeń "mousedown" oraz "touchstart"
    function onPointerDown(ev) {
        // Ignorowanie kliknięć na elementach portów
        if (ev.target.classList.contains('port-label') || ev.target.closest('.port-label')) {
            return;
        }

        // Tylko lewy przycisk myszy lub dotyk
        if ((ev.button !== undefined && ev.button !== 0) && ev.type !== 'touchstart') {
            return;
        }

        clickStart = { x: ev.clientX || ev.touches[0].clientX, y: ev.clientY || ev.touches[0].clientY };
        hasMoved = false;

        // Ustawienie czasu opóźnienia (dotyczy tylko myszy)
        clickTimer = setTimeout(function() {
            if (!hasMoved) {
                startDrag(ev);
            }
        }, 300);

        ev.preventDefault();
    }

    // Resetowanie stanu po zwolnieniu przycisku myszy lub zakończeniu dotyku
    function onPointerUp(ev) {
        if (clickTimer) {
            clearTimeout(clickTimer);
            clickTimer = null;
        }
    }

    // Śledzenie ruchu w celu wykrycia przeciągania
    function onPointerMove(ev) {
        if (clickTimer && clickStart) {
            var distance = Math.sqrt(
                Math.pow((ev.clientX || ev.touches[0].clientX) - clickStart.x, 2) + 
                Math.pow((ev.clientY || ev.touches[0].clientY) - clickStart.y, 2)
            );
            if (distance > 5) {
                hasMoved = true;
                clearTimeout(clickTimer);
                clickTimer = null;
            }
        }
    }

    // Nasłuchiwanie na zdarzenia dla myszy i dotyku
    element.addEventListener('mousedown', onPointerDown);
    element.addEventListener('touchstart', onPointerDown);
    document.addEventListener('mouseup', onPointerUp);
    document.addEventListener('touchend', onPointerUp);
    document.addEventListener('mousemove', onPointerMove);
    document.addEventListener('touchmove', onPointerMove);
}

{
  "luci-ports": {
    "description": "Access to custom ports",
    "read": {
      "uci": [ "*" ],
      "ubus": {
        "luci": [ "getBuiltinEthernetPorts" ],
        "file": [ "read", "write" ]
      },
      "file": {
        "/etc/user_defined_ports.json": [ "read" ],
        "/www/luci-static/resources/view/status/include/29_ports.js": [ "read" ]
      }
    },
    "write": {
      "file": {
        "/etc/user_defined_ports.json": [ "write" ]
      },
      "ubus": {
        "file": [ "write" ],
        "luci": [ "getBuiltinEthernetPorts" ]
      }
    }
  }
}