Discussion :

[RinaKIm]

Bonjour,

L'idée c'esst que je suis en train d'elaborer un site du genre websitebuilder.
j'ai un drag et un drop qui marche, je veux qu'au drop une fentre pop-up s'affiche sachant que j'ai déja fait la fonctionalité d'affichage du contenue au drop comme vous aller le voire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
else {
	// after some time hide drop area and remove class 'drag-active' from body
	clearTimeout( dropAreaTimeout );
	dropAreaTimeout = setTimeout( afterDropFn, 400 );
        console.log('ok');
        elContent = el.id;
        if(elContent === 'div'){
                var myWindow = window.open("","","width=600,height=450");;
                newContent = myWindow.document.createElement("textarea");
                myWindow.document.body.appendChild(newContent);
                dropZone.append(div);
        }
        else if(elContent === 'img'){
                dropZone.append(img);
        }

Donc la je veux qu'au drop de la dropZone.append(div); une fentre pop up avec un texte area s'affiche pour ecrire un texte qui s'affiche de suite la ou on a drop ...

La pop up marche maintenant mais le probléme c'est que se que j'ecrit au text area ne s'affiche pas dans la dropzone.
Je ne sais pas si vous pouvez m'aider.

Merci d'avance.

[-Rpass-]

bonjour, ou est le code ou tu écris dans ta dropzone ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

dropZone.append(div);

Que contient div ? Le bout de code que tu nous a donné ne nous permet pas de t'aider

[RinaKIm]

BOnjour,

Voila tout le script que j'ai ecrit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
(function () {
  var div = ' <div style=" width:200px ; height:200px; backgroun: #222;" >  elContent  </div>';
  var img = ' <img src="#" /> ';
  var dropZone = $('#drop-area');
  var body = document.body,
  dropArea = document.getElementById('drop-area'),
  droppableArr = [
  ],
  dropAreaTimeout;
  // initialize droppables
  [
  ].slice.call(document.querySelectorAll('#drop-area')).forEach(function (el) {
    droppableArr.push(new Droppable(el, {
      onDrop: function (instance, draggableEl) {
        // show checkmark inside the droppabe element
        classie.add(instance.el, 'drop-feedback');
        clearTimeout(instance.checkmarkTimeout);
        instance.checkmarkTimeout = setTimeout(function () {
          classie.remove(instance.el, 'drop-feedback');
        }, 800);
        // ...
      }
    }));
  });
  // initialize draggable(s)
  [
  ].slice.call(document.querySelectorAll('#grid .grid__item')).forEach(function (el) {
    new Draggable(el, droppableArr, {
      scroll: true,
      scrollable: '#drop-area',
      scrollSpeed: 40,
      scrollSensitivity: 50,
      draggabilly: {
        containment: '#drop-area'
      },
      onStart: function () {
        // add class 'drag-active' to body
        classie.add(body, 'drag-active');
        // clear timeout: dropAreaTimeout (toggle drop area)
        clearTimeout(dropAreaTimeout);
        // show dropArea
        //							classie.add( dropArea, 'show' );
      },
      onEnd: function (wasDropped) {
        var afterDropFn = function () {
          // hide dropArea
          //								classie.remove( dropArea, 'show' );
          // remove class 'drag-active' from body
          classie.remove(body, 'drag-active');
        };
        if (!wasDropped) {
          afterDropFn();
        } 
        else {
          // after some time hide drop area and remove class 'drag-active' from body
          clearTimeout(dropAreaTimeout);
          dropAreaTimeout = setTimeout(afterDropFn, 400);
          console.log('ok');
          elContent = el.id;
          if (elContent === 'div') {
            var myWindow = window.open('', '', 'width=600,height=450');
            ;
            newContent = myWindow.document.createElement('textarea');
            myWindow.document.body.appendChild(newContent);
            dropZone.append(div);
          } 
          else if (elContent === 'img') {
            var myWindow = window.open('', '', 'width=600,height=450');
            ;
            newContent = myWindow.document.createElement('textarea');
            myWindow.document.body.appendChild(newContent);
            dropZone.append(div);
            dropZone.append(img);
          }
        }
      }
    });
  });
}) ();

le truc c'est que a la fenetre pop up je veux ajouter un bouton submit, pour que ce que j'ecrit dans le text area s'affiche dans la drop zone avec avoir cliquer sur submit