thanks for your time.

I'm developing a mobile app with PhoneGap. I have a view that has some records, and those records need to be rearranged by doing a drag and drop. The number of this records might variate from 2 to 12, and they are inside a container that implements a scroll by the native properties of css, like this:

div#parentDiv {
    -webkit-overflow-scrolling: touch;
    overflow:                   scroll;
    width:                      100%;
}

Now, the thing is. I have tryied to do this but there seems to be some sort of events conflict. When you tap down or do a "finger down" event, the event that lasts is the scroll of the inner container, instead of being able to drag and drop the inner elements of that view.

I tryied an alternate option that is not acceptable, as you will see in this screenshot:

Here I made a scroll down to the last element of the list.

As you will see, I need to keep both the scroll and do a drag and drop.

Do you have any idea of how can I solve this?

I have tried by using plugins, HTML native drag and drop, and so far, nothing has worked for me.

Thanks again.

thanks for your time.

I'm developing a mobile app with PhoneGap. I have a view that has some records, and those records need to be rearranged by doing a drag and drop. The number of this records might variate from 2 to 12, and they are inside a container that implements a scroll by the native properties of css, like this:

div#parentDiv {
    -webkit-overflow-scrolling: touch;
    overflow:                   scroll;
    width:                      100%;
}

Now, the thing is. I have tryied to do this but there seems to be some sort of events conflict. When you tap down or do a "finger down" event, the event that lasts is the scroll of the inner container, instead of being able to drag and drop the inner elements of that view.

I tryied an alternate option that is not acceptable, as you will see in this screenshot:

Here I made a scroll down to the last element of the list.

As you will see, I need to keep both the scroll and do a drag and drop.

Do you have any idea of how can I solve this?

I have tried by using plugins, HTML native drag and drop, and so far, nothing has worked for me.

Thanks again.

• javascript
• html
• css
• cordova
• drag-and-drop

Share Improve this question Follow edited Jan 22, 2015 at 14:11 Dimitri Dewaele 10.7k2121 gold badges8383 silver badges130130 bronze badges asked Jun 10, 2014 at 23:20 user352353user352353

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +25

I'm not sure I pletely understand the problem at hand. But, here's my take on a solution:

window.addEventListener("mousedown", function(e1){
    timer = setTimeout(startDrag_disableScroll, 500);
    window.addEventListener("mousemove", function(e2){
        //if not dragging, and |e1_location-e2_location|
        //exceeds a certain threshold, cancel the timer
        //otherwise, drag the object, if dragging
    });
});
window.addEventListener("mouseup", function(e){
    //disable dragging
});

function startDrag_disableScroll(e){
    //disable scrolling
    //enable dragging
}

1. Wait until the user clicks on an item
2. If they hold the same position for a small amount of time (< .5s), we switch from "scrolling" mode to "dragging" mode; if they move too much, we can assume they want to scroll instead, so we don't enable dragging.
3. Once in "dragging" mode, we disable scrolling by changing the CSS overflow to hidden
4. Wait until the user releases their finger/mouse before switching back to "scrolling" mode.

Here is a JSFiddle with a plete demo. If you quickly click and drag your mouse, nothing will happen (if you were on a mobile device, it should scroll). However, if you click and hold for .5 sec, scrolling will be disabled and the draggable item will turn red. Once you release the mouse, it should reset.

I assume you also want to be able to scroll whilst dragging. To do this, you'd have to do auto-scrolling with JavaScript. If they drag the item far enough up/down the screen, it will start to auto-scroll up or down, respectively.

Use this.

Drag and drop library for a two-dimensional resizable and responsive list of items.

Almost definitely addresses the problem you are having, and will allow for features & expandability that will definitely be useful as you continue development :)

I would use a TapHold (also known as "long press") event to trigger the "sortable lists". The user won't be able to sort the list of articles unless he presses for a few seconds on the list. At that moment, he'll be able to order the list items.

You can use any jQuery UI Sortable or any other "sortable" plugin.

If you don't want to use the TapHold, you can use the following code:

var pressTimer;
$(function(){
        // By default, disable the sortable list

        $("#sortable").mouseup(function(){
            // Disable the sortable list

            clearTimeout(pressTimer);
            // Clear timeout
            return false;
        }).mousedown(function(){
            // Set timeout
            pressTimer = window.setTimeout(function() {
                // Enable the sortable list

            },1000);
            return false; 
        });
    });