make dataview dynamic elements draggable

[jmcfet]

I have a dataview that is populated using a store and template so the process is dynamic. I then want to make each of the container Divs (see template) draggable and use the following code. I would have expected just the container divs(image + name) to be draggable but instead the whole DataView is draggable. Was wondering what i am doing wrong?

Ext.define('MyApp.view.allImages', {    extend: 'Ext.dataview.DataView',
    xtype: 'cams',
    requires: [
        'MyApp.store.images'
    ],
    config: {
      
        title: 'Test',
        store: 'images',
        baseCls: 'camera-list',


        itemTpl: [
            '<div id="camimage">',
                '<div class="image" style="background-image:url({fullimage})"></div>',
                '<div class="name">{address}</div>',
            '</div>'
        ].join(''),
        records: null,
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Gainesville'
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [
                    {
                        xtype: 'button',
                        text: 'Path1'
                    },
                    {
                        xtype: 'button',
                        text: 'Path2'
                    },
                    {
                        xtype: 'button',
                        text: 'Path3'
                    }
                ]
            }
        ]
        
    },
    initialize: function () {
        this.callParent(arguments);
        //get the divs that we want to make draggable
        var images = this.element.select("div[id='camimage']");
 
       	Ext.each(images.elements, function (imageElement) {
           
            imageElement.draggable = true;
        });


    }

[mitchellsimoens]

Just doing

imageElement.draggable = true;

won't do anything. You can try to create Ext.util.Draggable passing in the element you want draggable. Looking at the source there is an element config.

[jmcfet]

I tried the following code with the same result, the entire dataview is draggable I also checked the imageElement and it looks correct as it contains my HTML:

 Ext.each(images.elements, function (imageElement) {            imageElement.draggable = new Ext.util.Draggable({
                element: imageElement,
                listeners: {
                    dragstart: function (self, e, startX, startY) {
                        console.log("test dragStart[" + startX + ":" + startY + "]");
                    },
                    drag: function (self, e, newX, newY) {
                        console.log("test drag[" + newX + ":" + newY + "]");
                    },
                    dragend: function (self, e, endX, endY) {
                        console.log("test dragend[" + endX + ":" + endY + "]");
                    }
                }
            });
     
        });

[jmcfet]

There are actually 2 problems here 1) the whole containing DataView moving was solved by setting the scrollable config on the dataview to false. of course this has huge side-effects but another battle as I think the Sencha draggable code is a little weak as one needs to scroll and drag. 2) I changed the select to:

var images = this.element.select("div[class='image']");

as a static Id cannot be used in this case and the class solves the issue