Question

我想要一些代码来删除红色div上删除的元素。我需要代码来执行以下操作：

在＆＃34; Canvas＆＃34;上创建点击的元素格。
让用户拖动元素

最后让用户通过将其删除为红色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>

Answer 1

您无法在画布中放置（请参阅Placing a <div> within a <canvas>）

Canvas就像一幅画，而不是乐高积木的集合 - 你在画布上放的是扁平而永久的。 DOM更像是乐高积木的集合;你可以选择一个并移动它（并且它附带的所有东西都会移动）。

你最接近用画作移动的东西可能只是涂抹油漆：）

你想要做的最有效的方法是创建一个虚拟的＆＃34;由DOM对象构建的绘画/画布然后＆＃34;绘制＆＃34;在你的画布上（见https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas）

为什么以下JQuery UI代码不能删除被删除的元素？

1 个答案: