CODEWITHSUNDEEP
htmlcsstinymcetinymce-4
Andrew.Royal
Andrew.Royal

Reputation: 73

TinyMCE and Drag Conflict Issues

My page reads as follows.

The problem is that when I use draggabilly to drag the move-line, dragging to the left is fine, but when I drag it to the right, it doesn't work in the area where the tinymce compiler is located. How do I fix this problem?

enter image description here

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .all-warp {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;

        }

        .left {
            width: 200px;
            background-color: burlywood;
        }
        .move-line {
            width: 4px;
            background-color: crimson;
            cursor:e-resize;
        }
        .editor-warp {
            flex-grow: 2;
        }
    </style>


<body>
    <div class="all-warp">
        <div class="left"></div>
        <div class="move-line"></div>
        <div class="editor-warp">
            <textarea id="editor"></textarea>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            var $draggable = $('.move-line').draggabilly({
                axis: 'x',
                containment: '.all-warp'
            })
        });
        tinymce.init({
            selector: '#editor',
            menubar: false,
            statusbar: false,
            resize: false,
            height:500,
        });
    </script>
</body>

</html>

Upvotes: 0

Views: 330

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13744

Without seeing actual running code I cannot say for sure but I would suspect this is because the TinyMCE editing region itself is an iframe? Does the drag code you have work if you replace TinyMCE with a regular iframe? If not that would be your issue.

Upvotes: 1

Related Questions