1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    2
    Vote Rating
    0
    AndreasI is on a distinguished road

      0  

    Question Drag from DataView, drop to DataView

    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
    Ext User danielbertini's Avatar
    Join Date
    Oct 2007
    Posts
    77
    Vote Rating
    0
    danielbertini is on a distinguished road

      0  

    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 - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    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
    Ext User
    Join Date
    Jul 2010
    Posts
    2
    Vote Rating
    0
    AndreasI is on a distinguished road

      0  

    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
    Vote Rating
    0
    casic has a little shameless behaviour in the past

      0  

    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
    Vote Rating
    0
    casic has a little shameless behaviour in the past

      0  

    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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    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
    Vote Rating
    0
    casic has a little shameless behaviour in the past

      0  

    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
    Vote Rating
    0
    Drömbolaget is an unknown quantity at this point

      1  

    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

Thread Participants: 6

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi