Question

我需要你的帮助。我试图像这样创建一个可放置的标签列表：

列表元素（Parametr 1，Parametr 2，Parametr 3）是可拖动的，上面的字段叫做'Tekst naglowka＆＃39;可以辍学。我需要在封闭的图像上看到这样的标签（＆＃39;参数1＆＃39;最后用＆＃39;交叉）。

你有什么想法吗？

有我的js：

var ResultComponent = React.createClass({

getInitialState: function () {
// … Some code …….

},

handleClick: function(event) { 
// … Some code …….
// Include html (displaying data)
this.constructor.searchResultMethod(para,para1,para2)

 },

statics: {
          deleteMethod: function(para = ''){
                 console.log(para);
          });
        searchResultMethod: function(){
        var html = ‘’
        loop{
                    var html += '<button id="button" onClick="'+ResultComponent.deleteMethod(1)+'"> delete </button>';
        }
        }

render: function() {
        return (
          <div>
            <button className={this.state.classes} id={this.state.execute} onClick={this.handleClick} >Execute</button>
            <button className={this.state.classes} id={this.state.save} onClick={this.handleClick}>Save</button>
          </div>
        );
    }

});

我的HTML：

$('ul li').draggable({
revert: true,
helper: 'clone',
revert: "invalid",
cursor: "move"
});

initDroppable($("#headerTextInput"));

function initDroppable($elements) {
$elements.droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-drop-hover",
  accept: ":not(.ui-sortable-helper)",
  over: function(event, ui) {
    var $this = $(this);
  },
  drop: function(event, ui) {
    var $this = $(this);
    $("#headerTextInput p").remove();
    $("#headerTextInput").focus();
    $("<div class='dropped'></div>").text(ui.draggable.text()).appendTo(this);
    $(".dropped").append("<i class='droppedCross fa fa-times' aria-hidden='true'></i>");
    if (this.children.length > 0) {
      return false;
    }
  }
});}

$("#headerTextInput").sortable();

如何使标签看起来像封闭的示例？我的意思是 - 每次掉落后标签末尾都有十字架？

提前致谢！

Answer 1

试试这个

$('ul li').draggable({
  revert: true,
  helper: 'clone',
  revert: "invalid",
  cursor: "move"
});

initDroppable($("#headerTextInput"));

function initDroppable($elements) {
  $elements.droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-drop-hover",
    accept: ":not(.ui-sortable-helper)",
    over: function(event, ui) {
      var $this = $(this);
    },
    drop: function(event, ui) {
      var $this = $(this);
      $("#headerTextInput p").remove();
      $("#headerTextInput").focus();
      $("<div class='dropped'></div>").html(ui.draggable.text()+"<i class='droppedCross fa fa-times' aria-hidden='true'></i>").appendTo(this);
      
      if (this.children.length > 0) {
        return false;
      }
    }
  });
}

$("#headerTextInput").sortable();

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<label class="headerTextLabel" for="headerTextInput">Tekst nagłówka</label>
<div id="headerTextInput" tabindex="0">
  <p>Dodaj tekst...</p>
</div>

<div class="addParameterButton">
  DODAJ PARAMETR
</div>

<ul class="parametersList">
  <li id="Parameter 1" class="listElement">Parametr 1</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i>
  <li id="Parameter 2" class="listElement">Parametr 2</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i>
  <li id="Parameter 3" class="listElement">Parametr 3</li><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash" aria-hidden="true"></i>
</ul>

使用.html()代替.text()，只需附加字体真棒图标。

拖动标签列表元素

1 个答案: