0

我正在尝试创建一个拖放界面，以拖动按钮、文本区域、输入字段等元素。

有人会看看我的代码，看看出了什么问题吗？（我对 JQuery 很陌生）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Mon, 12 Aug 2013 11:49:18 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://lazybots.com/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
    .draggable { display:inline-block;  position:absolute; background-color:#00FFFF; padding-  right:5px;}
     #draggable { cursor: n-resize; }

     #containment-wrapper { margin:5px; width: 98%; height:300px; border:2px dotted #ccc; }

     input[type=text] {margin:2px;}

input[type=button] {margin:2px; }



</style>

</head>
<body>

<center>


<div id="tabs">
<ul id="tablink"></ul>

</div>



            <!-- ################## START OPTIONS ############### -->

<table style="width:95%;">

<th>UI Text Box</th>
<th>UI Block Text</th>
<th>UI Button</th>

 <tr>
 <td>
 <input type="text" id="text-box-variable" placeholder="#Variable" /><br>
 <input type="text" id="text-box-placeholder" placeholder="Placeholder" /><br>
 <input type="text" id="text-box-width" placeholder="Width (px)" style="width:80px;" />
 <input type="button"  id="New_Text_Box" class="New_Text_Box btn btn-primary" value="Create Text Box" />
 </td>

 <td>
 <input type="text" id="text-area-variable" placeholder="#Variable" /><br>
 <input type="text" id="text-area-placeholder" placeholder="Placeholder" /><br>
 <input type="button"  id="New_Text_Area" class="New_Text_Area btn btn-primary" value="Create Text Area" />
 </td>

 <td>
 <input type="text" id="button-define" placeholder="Define Command Name" /><br>
 <input type="text" id="button-value" placeholder="Button Value" /><br>
 <input type="button"  id="New_Button" class="New_Button btn btn-primary" value="Create Text Button" />

 <input type="button"  id="New_Tab" class="New_Tab btn btn-primary" value="Create New Tab" />
 </td>
 </tr>

</table>
  <input type="text" name="qty" value="0" id="qty" />
 </center>


   </body>

   <script>

                <!-- ############ CREATE TEXT BOX ############## -->

   $(function() {
     $( ".draggable" ).draggable({containment:"#containment-wrapper"});
     $('.New_Text_Box').click(function(){
    var width = $("#text-box-width").val(); 
    var variable = $("#text-box-variable").val();
    var placeholder = $("#text-box-placeholder").val();
         var htmlData='<div class="draggable" ><input type="text" style="width:'+width+'px;" variable="'+variable+'" placeholder="'+placeholder+'"  /></div>';
         $('.UI').append(htmlData);
        $( ".draggable" ).draggable({containment:"#containment-wrapper"});
     $(".draggable").on('dblclick',function(){
   $(this).draggable('destroy');
   //in case you like to use if after
   //$(this).hide();
   //as in your code
   $(this).remove();
})
    });
    });

    <!-- ############ CREATE TEXT AREA ############## -->


      $(function() {
$( ".draggable" ).draggable({containment:"#containment-wrapper"});
$('.New_Text_Area').click(function(){
    var variable = $("#text-area-variable").val();
    var placeholder = $("#text-area-placeholder").val();
    var htmlData='<div class="draggable" ><textarea placeholder="'+placeholder+'" variable="'+variable+'"></textarea></div> ';
    $('.UI').append(htmlData);
    $( ".draggable" ).draggable({containment:"#containment-wrapper"});
    $(".draggable").on('dblclick',function(){
   $(this).draggable('destroy');
   //in case you like to use if after
   //$(this).hide();
   //as in your code
   $(this).remove();
})
    });
    });

    <!-- ############ CREATE BUTTON ############## -->

$(function() {
$( ".draggable" ).draggable({containment:"#containment-wrapper"});
$('.New_Button').click(function(){
    var define = $("#button-define").val();
    var value = $("#button-value").val();
    var htmlData='<div class="draggable" ><input type="button" value="'+value+'" class="btn btn-primary" onclick="ubot.runScript(\''+define+'()\');" /></div> ';
    $('.UI').append(htmlData);
    $( ".draggable" ).draggable({containment:"#containment-wrapper"});
    $(".draggable").on('dblclick',function(){
    $(this).draggable('destroy');
   //in case you like to use if after
   //$(this).hide();
   //as in your code
   $(this).remove();
     })
    });
    });


    </script>

 <!-- ############ CREATE NEW TAB ############## -->
   <script>

 var incrementVar = 0;
 $(function() {
     $(".New_Tab").click(function() {
         var value = parseInt($(":text[name='qty']").val()) + 1;
    $(":text[name='qty']").val(value);
    incrementVar = incrementVar + value;
    var newTabLabel='<li><a href="#tabs-'+value+'">Tab '+value+'</a></li>';
    var newTabContent='<div id="tabs-'+value+'" ><div id="containment-wrapper">    <div class="UI"></div></div> </div>';
    $('#tablink').append(newTabLabel);
    $('#tabs').append(newTabContent);
    $( "#tabs" ).tabs();
    $( "#tablink" ).tabs();
     });
 });

   </script>

      </html>

卡尔干杯:-)

4

2 回答 2

0

if you want to do drag and drop functionality then you can also use touch events like touch start, on touch, touch end . I think it will work and more easy then this you can call jquery with touch events easily then this. hope it will help you once try

于 2013-08-14T11:40:07.857 回答
0 
here is working example for you :

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>Drag :</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<input type="button" draggable="true" ondragstart="drag(event)" id="drag1" value="button" name="button" width="100px" height="100px">


</body>
</html>
于 2013-08-14T12:37:41.460 回答