Question

如果这个问题草拟得很草率，我道歉。我刚刚开始理解jquery的某个地方。

我想基于拖放实现表单构建器。

流程已经开始，为单个元素做了我想要的事情：

jsfiddle.net/z7sxxhe4

主要问题 - 如何在拖动＆＃34;转换＆＃34;之后左列的每个元素都这样做到另一个元素。

例如，我拖动第一个按钮 - 它变成了一个表单。拖动第二个 - 它变成一个表等等。

非常感谢您的帮助！

Answer 1

在你的drop函数中，它会给你ui，其中包含你拖放的元素。因此，您将检查它是什么类型的元素或id，名称等，并使用基于此的条件来确定要添加的元素类型。

示例：

drop: function (e, ui) {
  if (ui.draggable[0].id == "auth") {
      var $field = '<div class="input-block"><span class="label label-primary">'+          ui.draggable.text() +'</span><input type="text" class="form-control main-input" placeholder="Your text"></div>';
      var $el = $($field);
      $el.append($('<div class="removeqwe"><button type="button" class="btn btn-default btn-xs remove"><span class="glyphicon glyphicon-trash"></span></button></div>').click(function () {    $(this).parent().detach(); }));
      $(this).append($el);
  }
  else if (ui.draggable[0].id == "second") {
       ....
  }
  else if (ui.draggable[0].id == "third") {
       ....
  }
  else if (ui.draggable[0].id == "fourth") {
       ....
  }  
}

Answer 2

尝试这样的事情：

<ul class="nav nav-pills nav-stacked filters">
    <li class="active" id="auth" data-type="form"><a href="#">Auth</a></li>
    <li class="active" id="second" data-type="table"><a href="#">Second</a></li>
    <li class="active" id="third" data-type="button"><a href="#">Third</a></li>
    <li class="active" id="fourth" data-type="div"><a href="#">Fourth</a></li>
</ul>


drop: function (e, ui) {
    var $field = "<" + ui.draggable.data("type") + " " + // the rest
}

更好的是：

drop: function (e, ui) {
    var $element = $("<" + ui.draggable.data("type") + ">");
    $element.addClass("someClass");
}

如何为每个可拖动元素实现droppable的不同属性？

2 个答案: