CODEWITHSUNDEEP
javascriptjquery
beek
beek

Reputation: 3750

jQuery drag very wide div horizontally

Hi I've got this wide div, that I'd like to be able to drag horizontally, for a metro style interface.

http://jsfiddle.net/hwvvu2rg/7/

      var el_w = $('.draggable').outerWidth();

                $('#guide').on("mousemove", function(e) {

                    if ($dragging) {
                        $('#guide').offset({
                            left: e.pageX - el_w / 2
                        });
                    }

Currently everytime you mousedown, it resets to the first position, how do I adjust the maths so that each time you drag it uses the current position, so you can drag it along?

Upvotes: 0

Views: 172

Answers (1)

Fancyoung
Fancyoung

Reputation: 2423

You can capture the relative position on mousedown (such as e.pageX - (parseInt($(this).css('left')) || 0)), try this:

http://jsfiddle.net/hwvvu2rg/9/

Upvotes: 1

Related Questions