JavaScript/jQuery элемент перетаскивания между двумя iframes

У меня есть страница с 2 iframe, бок о бок, как из одного домена. Я хочу перетащить элемент из определенной области перетаскивания (например, таблицы) из одного iframe в конкретную dropzone (например, список) с другой. Я проверил все связанные вопросы в stackoverflow и в других местах, но я не могу найти подходящее решение. Я попробовал его с jQuery UI draggable, но проблема в том, что возвращаемый элемент перетаскивания содержится внутри iframe. Я не могу вытащить его из границ iframe. Итак, моя следующая мысль заключалась в том, чтобы создать перетаскиваемый элемент в верхнем (родительском) окне, но тогда, я думаю, мне придется каким-то образом вызвать событие перетаскивания в родительском окне из события dragstart на iframe. Но тогда, как бы я обнаружил событие drop, когда я наводил курсор на соответствующие элементы на кадре?JavaScript/jQuery элемент перетаскивания между двумя iframes

О, и если это уже не так уж и сложно, я бы хотел, чтобы это работало и на IE8 :) Но пока давайте просто скажем, что я найду резервное решение для IE8, которое не будет включать drag ' n'drop.

источник

2015-03-05 AsGoodAsItGets

Атаковать проблему в два этапа. Сначала выясните, как перетащить элемент из iframe в родительский документ. Как только вы там, получение исходного документа в iframe уже разрешено. http://stackoverflow.com/questions/3075696/drag-drop-across-frames-with-jquery-ui/6814333#6814333 –

Может ли перетаскиваемый элемент быть липким (нажмите, чтобы выбрать, нажмите еще раз, чтобы отбросить), или он должен работать с пользователем, удерживающим мышь/касание вниз? – nothingisnecessary

Он должен работать как обычный drag'n'drop, т. Е. Удерживать мышь до перетаскивания. В противном случае я знаю, как имитировать поведение уже. – AsGoodAsItGets

Вы можете имитировать перетаскивание путем отправки сообщений мыши из iframe в родительский элемент и выполнения перетаскивания в родительском. Вот codepen показ перетаскивания элементов списка из одного кадра к другому: http://codepen.io/brenzy/details/zxMZmO/

Поскольку SO хочет некоторый код, вот это dragHandler разговаривает с родителем:

$("li").mousedown(function (event) { 
    dragElement = $(this); 
    if(event.stopPropagation) event.stopPropagation(); 
    if(event.preventDefault) event.preventDefault(); 
    event.cancelBubble=true; 
    event.returnValue=false; 
    return false; 
}); 

$(document).mousemove(function (event) { 
    if (dragElement) { 
    if (!dragStarted) { 
     // tell the parent to start dragging the item 
     parent.postMessage({ 
     action: "dragStart", frame: myId, 
     itemText: dragElement.text(), itemId: dragElement.attr('id'), 
     offset: {left: event.pageX, top: event.pageY} 
     }, '*'); 
     dragStarted = true; 
    } else { 
     parent.postMessage({action: "dragMove", frame: myId, 
     offset: {left: event.pageX, top: event.pageY}}, '*'); 
    } 
    } 
}); 

$(document).mouseup(function (event) { 
    if (dragStarted) { 
    parent.postMessage({ 
     action: "cancelDrag", frame: myId, 
     itemText: dragElement.text(), itemId: dragElement.attr('id'), 
     offset: {left: event.pageX, top: event.pageY} 
    }, '*'); 
    } 
    dragStarted = false; 
    dragElement = null; 
});

Примечание: Это работает только в Chrome, но Я уверен, что вы можете заставить его работать в других браузерах.

источник

2015-03-16 13:20:47 brenzy

Интересно, так что вы не используете собственную поддержку HTML 5 DnD и вообще не перетаскиваете события? Мне нужно будет внимательно изучить код, но ваш ответ кажется лучшим до сих пор. Скажите, что, если никто больше не придумает что-то лучше, вы можете получить щедрость, по крайней мере, за все усилия! (что, кстати, некоторые люди здесь будут взимать USD $ 2K за! :)) – AsGoodAsItGets

Вы упомянули, что хотите, чтобы это работало в IE8. Я думаю, что с небольшими изменениями (setCapure для мыши и attachEvent для сообщений) вы также сможете получить эту работу в IE8. Я попытался понять, могу ли я придумать решение вашей проблемы, просто из-за этих двух комментариев :) – brenzy

Я не пишу полный код для вас, потому что в этом есть много кода. Но я дам вам основы. Он называется элементом сообщения. Вы можете передать элемент сообщения в родительское окно в фрейме с таблицей. Затем вы передадите другой элемент сообщения из родительского окна в дочернее окно со списком.

К сожалению, единственные места, которые у меня есть в производстве, происходят на сайтах, которые вы должны войти в систему для просмотра. И мой игровой сервер не доступен для внешнего мира. В противном случае я бы показал вам рабочий пример и позволил вам украсть код у меня или, по крайней мере, получить представление о том, как это работает.

Смотрите, если вы поместите 2 набора кода, указанного ниже в 2-х файлов, если вы можете заставить его работать вместе,

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <script> 
      window.onload = function() { 
       var iframeWin = document.getElementById("da-iframe").contentWindow, 
       form = document.getElementById("the-form"), 
       myMessage = document.getElementById("my-message"); 
       myMessage.select(); 
       form.onsubmit = function() { 
        iframeWin.postMessage(myMessage.value, "http://localhost/payground/"); 
        return false; 
       }; 
      }; 
</script> 
    </head> 
    <body> 
     <form id="the-form" action="/"> 
        <input type="text" id="my-message" value="Your message"> 
        <input type="submit" value="postMessage"> 
       </form> 

       <iframe id="da-iframe" src="frame.php"></iframe> 
    </body> 
</html>

Следующая бит должен идти в том же каталоге с именем frame.php

<html><head> 
    <script> 
     function displayMessage (evt) { 
      var message; 
      if (evt.origin !== "http://localhost") { 
       message = "You are not worthy "+evt.origin; 
      } 
      else { 
       message = "I got " + evt.data + " from " + evt.origin; 
      } 
      document.getElementById("received-message").innerHTML = message; 
     } 

     if (window.addEventListener) { 
      // For standards-compliant web browsers 
      window.addEventListener("message", displayMessage, false); 
     } 
     else { 
      window.attachEvent("onmessage", displayMessage); 
     } 
    </script> 
    </head> 
    <body> 
     <div id="received-message">I heard nothing yet</div> 
    </body> 
</html>

Надеюсь, этого достаточно, чтобы вы могли выяснить детали относительно того, что вы хотите сделать.

источник

2015-03-12 09:44:58 kayleighsdaddy

Прошу прощения, но нет, этого недостаточно, и я даже не вижу значения для мой вопрос. Мы говорим о типичном взаимодействии пользователя drag'n'drop, а не об обмене данными между iframes. Вы даже не используете события mousedown/move/up в вашем примере. Может быть, я должен быть более точным в моем вопросе? – AsGoodAsItGets

Да, но это используемый код, вам нужно будет изменить код, чтобы перетащить мышью. В этом примере показано, как отправлять данные с разных веб-страниц в фреймах. Как я сказал, это даст вам эту идею. Если вы на самом деле хотите, чтобы я запрограммировал его для вас, вам нужно было бы потратить немного денег. – kayleighsdaddy

JavaScript/jQuery элемент перетаскивания между двумя iframes

ответ

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