Почему следующий код JQuery UI не работает для удаления удаленного элемента? - PullRequest
Новая
       9

Почему следующий код JQuery UI не работает для удаления удаленного элемента?

0 голосов
/ 24 апреля 2018

Я хочу, чтобы какой-то фрагмент кода удалил элемент, упавший на красный элемент div. Мне нужно, чтобы код выполнял следующие действия:

  1. Создайте элемент "Canvas", на который нажали, * div.
  2. разрешить пользователю перетаскивать элемент

  3. наконец разрешить пользователю удалить элемент, поместив его в красный div.Я надеюсь, что я получу лучшее решение отсюда.вот код: 

    function makeResizable(x)
{
  x = $(x);
  x.resizable();

}
function makeDraggable(x)
{

  x = $(x);
      x.draggable();

 }

function createPredefine(){
$element = $(' <img src="img/5.jpg" alt="" height="45" width="110" 
onDblClick="makeResizable(this)" />');
$("#canvas").append($element);
$element.draggable();
}
$(document).ready(function(e) {
$( "#deleting_div" ).droppable({

    drop: function( event, ui ) {

        $(this).children().remove();
                    alert("trigger");

    }
  });
 });

    Создание компонентов 

            &nbsp &nbsp <img src="img/5.jpg" alt="" height="45" width="110" 
onClick="createPredefine()"/> &nbsp &nbsp&nbsp &nbsp <img 
src="img/6.jpg" alt="" height="60" width="80" onClick="createCircle()"/>
        <br /><br >



        </div>
</td>
<td>
              <div id="canvas" style="background- 
  color:#FFF;width:800px;height:700px;"> 
              <div id="deleting_div" style="background- 
        color:red;widhth:50px;height:50px;"></div>  
              <h2>&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp 
         &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
              &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
          &nbsp&nbsp&nbsp Draw Here</h2></div>
        </td>
        </tr>
         </table>
       </BODY>
        </HTML>

1 Ответ

0 голосов
/ 24 апреля 2018

Вы не можете разместить внутри холста (см. Размещение

)

Холст похож на картину, а не на коллекцию кирпичиков Lego.- то, что вы положили на холст, является плоским и постоянным.DOM больше похож на коллекцию кирпичиков Lego;Вы можете поднять один и переместить его (и все, что к нему прикреплено, будет двигаться).

Самое близкое, что вы могли бы получить к перемещению чего-либо с картиной, вероятно, просто испачкало бы краску:)

Чтовероятно, самый эффективный подход к тому, что вы пытаетесь сделать, - это создать «виртуальную» картину / холст, которая построена из объектов DOM, а затем «нарисовать» ее на свой холст (см. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas)

...