Перетащите в группу аккордеона

Question

Я - любитель в развитии front-end и поэтому нуждаюсь в некотором руководстве.

У меня есть проект, в котором я использую плавающую панель значков, положение которой я сохраняю в базе данных, и при обновлении или повторном входе в систему я использую эту сохраненную позицию, чтобы показать эту панель.

Код:

ko.components.register("shortcut-strip", {
    viewModel: function (params) {
        var self = this;
        self.ribbonIcons = params.data;
        self.eleId = params.eleId;
        self.showShortcutStrip = params.showShortcutStrip;

        self.setWidth = ko.computed(function () {
            if(self.ribbonIcons().length){
                //var toggleBtnWidth = $("#sToggle").parents('li').outerWidth();
                var btnWidth = $(".shortcutIcons li").eq(0).outerWidth() || 26;
                return (btnWidth * self.ribbonIcons().length) + 'px';
            }
        });
        self.position = params.position;

        setTimeout(function () {
            var dm = document.getElementById(self.eleId);
            dm.addEventListener('dragstart', drag_start, false);
            document.body.addEventListener('dragover', drag_over, false);
            document.body.addEventListener('drop', drop, false);
        }, 100);

        function drag_start(event) {
            var style = window.getComputedStyle(event.target, null);
            event.dataTransfer.setData("text (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY))";
        }

        function drag_over(event) {
            event.preventDefault();
            return false;
        }

        function drop(event) {
            var offset = event.dataTransfer.getData("text").split(',');
            var dm = document.getElementById('dragme');
            dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
            dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
            savePositionMethod(dm.style.left, dm.style.top);
            event.preventDefault();
            return false;
        }
    },
    template: '<div data-bind="attr:{id : eleId}, visible: showShortcutStrip, style: {left: position()[0], top: position()[1]}" draggable="true"><div class="shortcut-strip"><ul class="pull-left"><li> <span><img id="sToggle" style="padding: 5px 0px 4px 7px;" src="image.png"/> </span></li></ul> <ul class="shortcutIcons" data-bind="style:{width: setWidth()}"> <!-- ko foreach: ribbonIcons --> <li><img data-bind="attr :{src: Iconsrc, class: Class, title: title}, click: $root.performImageAction" /> </li> <!-- /ko --> </ul></div> </div>'
}); 

Но он делает все привязанные теги и ссылки на странице как перетаскиваемые, и, следовательно, событие drop запускается для всех элементов. Как я могу решить эту проблему? Пожалуйста помоги.

И, во-вторых, мне нужно реализовать перетаскивание в моей группе аккордеонов, чей код выглядит следующим образом:

<div class="accordion-group" id="assignedAccordion">
    <!--  ko foreach : Data() -->
    <div class="accordion-default" id="documentScroll">
        <div class="panel-title bg-none" data-bind="css:{active : isCollapsed()}">
            <span class="toggle" data-bind="click: $root.toggleCollapse, css:{expand : isCollapsed(), collapsed: !isCollapsed()}")> </span>
            <a class="accordion-toggle" data-bind="event: {contextmenu: $root.documentMenu, click: $root.getData}"></a>
            <input type="checkbox" class="assignedDocCheckbox" data-bind="checked: isChecked">
        </div>
        <div class="accordion-body" data-bind="style:{display : isCollapsed() ? 'block' : 'none'}">
            <!-- ko if: $data.documentData().length > 0 -->
                <ul data-bind="foreach: documentData()[0].pages">
                    <li><a href="javascript:void(0)" class="tool-tip" data-bind="event:{contextmenu: $root.pageMenu, click: $root.selectPage}, css:{'activePage' : $root.activePage() === $data}">
                            ${pageDispName} <span data-bind="text: displayName"></span>
                    </a></li>
                </ul>
            <!-- /ko-->
        </div>
    </div>
    <!-- /ko -->
</div>