Draggable Tanpa Jquery Ui

Published by Concept Phone Kamis, 12 Juli 2018

Terkait: JavaScript Draggable

$(function() {     $('body').on('mousedown', 'div', function() {         $(this).addClass('draggable').parents().on('mousemove', function(e) {             $('.draggable').offset({                 top: e.pageY - $('.draggable').outerHeight() / 2,                 left: e.pageX - $('.draggable').outerWidth() / 2             }).on('mouseup', function() {                 $(this).removeClass('draggable');             });         });         e.preventDefault();     }).on('mouseup', function() {         $('.draggable').removeClass('draggable');     }); });

Lihat Demo Kejutan =)

Pembaharuan 26 Februari 2013

Kode di atas kurang cerdas alasannya jQuery hanya memposisikan kursor di tengah elemen bergerak. Di sini Saya sudah menciptakan plugin sederhana yang lebih cerdas dan sanggup menyesuaikan posisi pointer terhadap elemen, tidak harus selalu di tengah elemen:

Lihat Demo Telah Dihosting

Penggunaan

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="//cdn.rawgit.com/tovic/dte-project/3c9ce0ac972ba889fc06e0374c866dd034198684/jquery-draggable/draggable.min.js"></script> <script> $(function() {     $('.box').drags(); }); </script>

HTML

<div class="box">Saya sanggup digeser...</div>

Sumber https://www.dte.web.id/