Results 1 to 10 of 10

Thread: Drag from DataView, drop to DataView

  1. #1

    Question Drag from DataView, drop to DataView

    Hi,
    after searching for a week in google and this forum for solving this problem I gave up and so I'm writing one more post about this issue hoping to find a solution for me and for others having this problem in future.
    First of all sorry for my "just not the best english", I'm italian and english is my 4th known language so please forgive me.

    Purpose: load previews of images in one DataView and drag them in another DataView for choose one or more of them.

    Problem: I could not define the DropTarget correctly, I tried it in differend methods, but in vain.

    My code (shortened for easier overview):
    Code:
    var view_from = new Ext.DataView({
     itemSelector: 'div.thumb-wrap',
     overClass:'x-view-over',
     multiSelect: true,
     store: images_store,
     tpl: images_template
     listeners: {
      render: function(v) {
       v.dragZone = new Ext.dd.DragZone(v.getEl(), {
        ddGroup: 'imageOrganizerDD',
        getDragData: function(e) {
         var sourceEl = e.getTarget(v.itemSelector, 10);
         if (sourceEl) {
          d = sourceEl.cloneNode(true);
          d.id = Ext.id();
          return v.dragData = {
           sourceEl: sourceEl,
           repairXY: Ext.fly(sourceEl).getXY(),
           ddel: d,
           dragData: v.getRecord(sourceEl).data,
           store: v.store
          }
         }
        },
        getRepairXY: function() {
         return this.dragData.repairXY;
        }
       });
      }
     }
    });
    var view_to = new Ext.DataView({
     itemSelector: 'div.thumb-wrap',
     style:'overflow:auto',
     multiSelect: true,
     ddGroup: 'imageOrganizerDD',
     store: images_JsonStore,
     tpl: images_template,
     listeners: {
      render: function(g) {
       g.dropZone = new Ext.dd.DropZone(g.getEl(), {
        ddGroup: 'imageOrganizerDD',
        getTargetFromEvent: function(e) {
         return e.getTarget('.test-target');
        },
        onNodeEnter: function(target, dd, e, data){ 
         Ext.fly(target).addClass('test-target-hover');
        },
        onNodeOut: function(target, dd, e, data){ 
         Ext.fly(target).removeClass('test-target-hover');
        },
        onNodeOver: function(target, dd, e, data){ 
         return Ext.dd.DropZone.prototype.dropAllowed;
        },
        onNodeDrop: function(target, dd, e, data){
         g.getRecord(target).set('url', data.dragData.url);
         g.getRecord(target).set('name', data.dragData.name);
         g.getRecord(target).set('id', data.dragData.id);
         data.store.remove(data.store.getById(data.dragData.id));
         return true;
        }
       });
      }
     }
    });
    var DropZone = function(view, config){
     this.view = view;
     DropZone.superclass.constructor.call(this, view.getEl(), config);
    };
    Ext.extend(DropZone, Ext.dd.DropTarget, {
     notifyDrop: function(source, e, drop_data) {
      // whatever on drop should happen ...
      alert('notifyDrop');
     }
    });
     
    // commented because these few rows doesn't work ...
    /*var dropZone = new DropTarget(view_from, {
      containerScroll: true,
      ddGroup: 'imageOrganizerDD'
    });*/
    Maybe there is another solution for solving this issue, instead of using a DataView, but I need thumbs in a size of 100x75 at least. But I think it has to work with DataView's as well... correct me if I'm wrong.

    This code works so far that I can drag the thumbs from the first DataView, but I can't drop them anyway. Has anyone a solution to this problem?

    I hope I could explain everything understandable enough!

    Many thanks in advance!

  2. #2

    Default

    Dude, I'm exactly the same problem, I'm also makes a 4 days
    find a solution to this but I could not ... you could find a
    solution?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Also, see the dragdropzones example in your examples/dd directory

    It's heavily commented and from what I read of your code, it does what you want. It drops items fro one DataView onto items of another DataView. (As opposed to dropping new items within the target DataView which is a different requirement)

  5. #5

    Default

    Yes I solved it, here the code that should work (some modifications needed!):
    Code:
    var view_from = new Ext.DataView({
     itemSelector: 'div.thumb-wrap',
     overClass:'x-view-over',
     multiSelect: true,
     store: new Ext.data.JsonStore(/* store options */),
     tpl: new Ext.XTemplate('<tpl for=".">...')
    });
    var view_to = new Ext.DataView({
     itemSelector: 'div.thumb-wrap',
     multiSelect: true,
     enableDD: true,
     store: new Ext.data.JsonStore(/* store options */),
     tpl: new Ext.XTemplate('<tpl for=".">...')
    });
    var dragZoneOverrides = {
     containerScroll: true,
     scroll: false,
     getDragData: function(v) {
      var dataView = this.dataView;
      var sourceEl = v.getTarget(dataView.itemSelector, 10);
      if (sourceEl) {
       var selectedNodes = dataView.getSelectedNodes();
       var dragDropEl = document.createElement('div');
       if (selectedNodes.length < 1) {
        selectedNodes.push(sourceEl);
       }
       Ext.each(selectedNodes, function(node) {
        dragDropEl.appendChild(node.cloneNode(true));
       });
       return {
        ddel: dragDropEl,
        repairXY: Ext.fly(sourceEl).getXY(),
        dragRecords: dataView.getSelectedRecords(),
        sourceDataView: dataView
       }
      }
     },
     getRepairXY: function() {
      return this.dragData.repairXY;
     }
    };
    var onImagesFromDragZoneCfg = Ext.apply({}, {
     ddGroup : 'imageOrganizerDD',
     dataView: view_from
    }, dragZoneOverrides);
    new Ext.dd.DragZone(view_from.getEl(), onImagesFromDragZoneCfg);
    var dropZoneOverrides = {
     onContainerOver: function() {
      return this.dropAllowed;
     },
     onContainerDrop: function(dropZone, evtObj, dragData) {
      var dragRecords = dragData.dragRecords;
      var store = this.dataView.store;
      var dupFound = false;
      Ext.each(dragRecords, function(record) {
       var found = store.findBy(function(r) {
        return r.data.id === record.data.id;
       });
       if (found > -1 ) {
        dupFound = true;
       }
      });
      if (dupFound !== true) {
       Ext.each(dragRecords, function(record) {
        //dragData.sourceDataView.store.remove(record);
       });
       this.dataView.store.add(dragRecords);
      }
      return true;
     }
    };
    var onImagesToDropZoneCfg = Ext.apply({}, {
     ddGroup: 'imageOrganizerDD',
     dataView: view_to
    }, dropZoneOverrides);
    new Ext.dd.DropZone(view_to.ownerCt.el, onImagesToDropZoneCfg);

  6. #6
    Sencha User
    Join Date
    May 2009
    Posts
    32

    Default

    Should work. But is not work.
    Can any one put working code please.
    Thanks in advance.

  7. #7
    Sencha User
    Join Date
    May 2009
    Posts
    32

    Default

    Yes, now work .
    Any ideas how to drag elements 2 or more times in second dataView.
    With Firerfox selected item is marked , but with IE not, so is hard to see which element is selected to drag.

  8. #8
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Casic, you can use examples from my book if you wish:

    http://extjsinaction.com/examples/chapter14/

    I am working on blog posts for cross-widget dnd (which is not difficult after reading the two drag and drop chapters).

  9. #9
    Sencha User
    Join Date
    May 2009
    Posts
    32

    Default

    Thanks a lot. I have used your examples to make this working. http://extjsinaction.com/examples/ch...ltiselect.html, but i have to make some corrections to work. On this link is not working. I have downloaded chapters from book , there was two time declared store for second DataView , however now work.

  10. #10
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    53

    Default

    2 years later Drag and drop is still hard, and all of the examples above are now broken.
    There is no longer any dataview drag/drop in the examples bundled with extjs.

    I assumed dataview was already drag/drop-sortable, but it is not.

Similar Threads

  1. [3.1.1] dataview drag and drop
    By wp.joju in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 18 Mar 2010, 5:16 AM
  2. Dataview - drag and drop
    By karga in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 10 Dec 2009, 4:21 AM
  3. DataView drag and drop
    By cripkd in forum Ext 3.x: Help & Discussion
    Replies: 12
    Last Post: 12 Nov 2009, 12:58 PM
  4. Drag and drop from DataView
    By m.pontus in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 10 Jul 2009, 3:14 PM
  5. Drag and Drop from DataView...
    By code loki in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 6 Jan 2008, 8:43 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •