Interactjs drag AND rotate holding the position

269
April 12, 2018, at 7:42 PM

I'm using interactJs to add drag-drop-rotate functionalities to some divs. I want to drag a div and rotate it where I dragged it. Now, with my code, I can drag the div, but when I use the rotate functionality then the position of the center is in the top-left corner, and the behaviour of the rotation is of course weird.

To resume: how can I drag a div and rotate it holding the position where I dragged it?

var positionX = 0; 
var positionY = 0; 
var positionAngle = 0; 
 
interact('.draggable') 
    .draggable({ 
        // enable inertial throwing 
        inertia: true, 
        // keep the element within the area of it's parent 
        restrict: { 
            drag: "self", 
            endOnly: true, 
            elementRect: { top: 0, left: 0, bottom: 1, right: 1 } 
        }, 
        snap: { 
          mode: 'anchor', 
            anchors: [], 
            range: Infinity, 
            endOnly: true, 
            relativePoints: [ 
                { x: 0, y: 0 }  // snap relative to the top left of the element 
            ] 
        }, 
        // enable autoScroll 
        autoScroll: true, 
 
        // call this function on every dragmove event 
        onmove: dragMoveListener, 
        // call this function on every dragend event 
        onend: function (event) { 
            var textEl = event.target.querySelector('p'); 
 
            textEl && (textEl.textContent = 
                'moved a distance of ' 
                + (Math.sqrt(Math.pow(event.pageX - event.x0, 2) + 
                Math.pow(event.pageY - event.y0, 2) | 0)) 
                    .toFixed(2) + 'px'); 
        } 
    }); 
 
    function dragMoveListener (event) { 
    var target = event.target, 
        // keep the dragged position in the data-x/data-y attributes 
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, 
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; 
        positionX = x; 
        positionY = y; 
        //console.log(positionY + ' and ' + positionY); 
 
    //translate the element 
    target.style.webkitTransform = 
        target.style.transform = 
            'translate(' + x + 'px, ' + y + 'px)'; 
    target.style.webkitTransform += 'rotate(' + positionAngle + 'rad' + ')'; 
    // update the posiion attributes 
    target.setAttribute('data-x', x); 
    target.setAttribute('data-y', y); 
} 
 
 
// this is used later in the resizing and gesture demos 
window.dragMoveListener = dragMoveListener; 
 
interact('.drag-rotate') 
    .draggable({ 
        onstart: function (event) { 
            const element = event.target; 
            const rect = element.getBoundingClientRect(); 
 
            // store the center as the element has css `transform-origin: center center` 
            element.dataset.centerX = rect.left + rect.width / 2; 
            element.dataset.centerY = rect.top + rect.height / 2; 
            console.log('centerx: ' + (element.offsetLeft + element.offsetWidth / 2)); 
            // get the angle of the element when the drag starts 
            element.dataset.angle = getDragAngle(event); 
        }, 
        onmove: function (event) { 
            var element = event.target; 
            var center = { 
                x: parseFloat(element.dataset.centerX) || 0, 
                y: parseFloat(element.dataset.centerY) || 0, 
            }; 
            var angle = getDragAngle(event); 
 
            // update transform style on dragmove 
            element.style.transform = 'rotate(' + angle + 'rad' + ')'; 
            element.style.webkitTransform += 'translate(' + positionX + 'px, ' + positionY + 'px)'; 
        }, 
        onend: function (event) { 
            const element = event.target; 
 
            // save the angle on dragend 
            element.dataset.angle = getDragAngle(event); 
 
        }, 
    }); 
 
function getDragAngle(event) { 
    var element = event.target; 
    var startAngle = parseFloat(element.dataset.angle) || 0; 
    var center = { 
        x: parseFloat(element.dataset.centerX) || 0, 
        y: parseFloat(element.dataset.centerY) || 0, 
    }; 
    var angle = Math.atan2(center.y - event.clientY, 
        center.x - event.clientX); 
    positionAngle = (angle - startAngle); 
    //console.log(positionAngle); 
 
    return angle - startAngle; 
} 
 
$(window).ready(function () { 
 
    $('input[name=rotate_switch]').change(function(){ 
        const desk = $(this).closest('.desk'); 
        if($('input[name=rotate_switch]').is(':checked')){ 
            desk.removeClass('draggable'); 
            desk.addClass('drag-rotate'); 
        } else { 
            desk.addClass('draggable'); 
            desk.removeClass('drag-rotate') 
        } 
    }); 
});
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC'); 
 
body { 
    font-family: 'Alegreya Sans SC', sans-serif; 
} 
.main-container { 
    background: url("../../asset/img/Sitzplan.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    position: relative; 
    width: 1340px; 
    height: 890px; 
} 
 
.desk { 
    height: 42px; 
    width: 87px; 
    background-color: #00458A; 
} 
 
 
/* The switch - the box around the slider */ 
.switch { 
    position: relative; 
    display: inline-block; 
    width: 32px; 
    height: 19px; 
    float: right; 
    margin-top: 2px; 
    margin-right: 2px; 
} 
 
/* Hide default HTML checkbox */ 
.switch input {display:none;} 
 
/* The slider */ 
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 
 
.slider:before { 
    position: absolute; 
    content: ""; 
    height: 18px; 
    width: 18px; 
    background-color: white; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 
 
input:checked + .slider { 
    background-color: #2196F3; 
} 
 
input:focus + .slider { 
    box-shadow: 0 0 1px #2196F3; 
} 
 
input:checked + .slider:before { 
    -webkit-transform: translateX(14px); 
    -ms-transform: translateX(14px); 
    transform: translateX(14px); 
} 
 
/* Rounded sliders */ 
.slider.round { 
    border-radius: 20px; 
} 
 
.slider.round:before { 
    border-radius: 50%; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://unpkg.com/interactjs@1.3.3/dist/interact.min.js"></script> 
    <div class="main-container"> 
        <div id="desk_1" class="draggable desk"> 
            <label class="switch"> 
                <input type="checkbox" name="rotate_switch"> 
                <span class="slider round"></span> 
            </label> 
        </div> 
    </div>

Rent Charter Buses Company
READ ALSO
Adding Text to Jquery.HTML

Adding Text to Jquery.HTML

I would like to know if it is possible to add text on html without using appendonly using jquery html i tried this but it doesnt work

216
Angular binding third party js library event initialize

Angular binding third party js library event initialize

Please suggest an solution for angular

172
How to select option by up and down arrow keys &ldquo;Auto Complete Search Result&rdquo; [on hold]

How to select option by up and down arrow keys “Auto Complete Search Result” [on hold]

I am trying to select searching result option by UP and Down arrows keys and also highlight by blue color

148