Невозможно перетащить изображение внутри div

Я создал div, чтобы перетащить & сбрасывать в нем фотографии ... главная проблема заключается в том, что если это работает, изображение не может быть перетаскивается внутри этого div.Невозможно перетащить изображение внутри div

код работает перетащить & падения

$('div[role="textbox"]').on(
    'dragover', 
    function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
     ); 
    $('div[role="textbox"]').on(
     'dragenter', 
     function (e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
     } 
    ); 


    $('div[role="textbox"]').on(
    'drop', 
    function (e) { 

});

код перетащить & падения не работают, но сопротивление внутри DIV работает

//$('div[role="textbox"]').on(
    //'dragover', 
    //function (e) { 
    // e.preventDefault(); 
    // e.stopPropagation(); 
    //} 
    // ); 
    //$('div[role="textbox"]').on(
    // 'dragenter', 
    // function (e) { 
    //  e.preventDefault(); 
    //  e.stopPropagation(); 
    // } 
    //); 


    $('div[role="textbox"]').on(
    'drop', 
    function (e) { 
//logic 
})

Есть ли способ объединить эти два, чтобы сделать и работу?

Изображение просто вставлено как.

источник

2015-06-16 EffGee

Где находится код HTML? – shreyansh

не думал, что это необходимо, потому что основная проблема заключается в том, что «drageenter» предотвращает перетаскивание внутри div, но обеспечивает drag & drop внутри div. и я хочу обоих :) – EffGee

Пожалуйста, создайте скрипку, чтобы лучше анализировать вашу проблему. – VJS

Это должно быть примером того, что вы хотите сделать:

<!DOCTYPE HTML> 
    <html> 
     <head> 
      <script> 
       function allowDrop(ev){ev.preventDefault()} 

       function drag(ev){ev.dataTransfer.setData("text", ev.target.id)} 

       function drop(ev){ 
        ev.preventDefault(); 
        var data = ev.dataTransfer.getData("text"); 
        ev.target.appendChild(document.getElementById(data)); 
       } 
      </script> 
     </head> 

     <body> 
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
      <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 
     </body> 
    </html>

Источник: http://www.w3schools.com/html/html5_draganddrop.asp

Кроме того, из моего опыта кросс-браузер, чтобы перетащить/падение вложенные элементы внутри DIV нужно отмените все свои события перетаскивания на родительском div.

element.ondragenter = function(event){event.preventDefault()}; 
element.ondragleave = function(event){event.preventDefault()}; 
element.ondragover = function(event){event.preventDefault()};

источник

2015-06-16 09:55:23 Lain

Невозможно перетащить изображение внутри div

ответ

Смежные вопросы