Question

目标：

用户提供输入（名称和大小）
按下按钮
使用名称居中

到目前为止，我已经能够在按钮点击时创建一个可拖动的对象，并在此对象内部放置一个静态字符串<p>Task</p>。

问题：如何根据用户输入动态更改此可拖动对象的大小，并替换静态＆＃34;文本＆＃34;用户名给出的名称？

代码：正如您所看到的，当我创建可拖动对象时，我在.append（）中添加了Task。我认为这会奏效： "...<p id=Task>"+userGivenName+"</p>？但即使这样可行，我也无法将文本置于可拖动对象的中心。

<!doctype html>
<html>
<head>


<link href="_css/jquery-ui.min.css" rel="stylesheet">
<link href="_css/site.css" rel="stylesheet">

<script src="_js/jquery.min.js"></script>
<script src="_js/jquery-ui.min.js"></script>
<style>
.makeMeDraggable {
  position: absolute;
  top: 20;
  left: 0;
  width: 300px;
  height: 300px;
  background: blue;

}
.wrapper {
  margin-top: 50px;
  margin-bottom: 20px;
}
#Task {
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  color: black;
}

</style>

<script>

$('document').ready(function(){
  $("#create_block").click(function(){
    $('.tasker').append($("<div class='makeMeDraggable'><p>id=Task>Task</div>"));
    $('.makeMeDraggable' ).draggable().css({
      'width': '50px', //set width
      'height': '50px' //set height
    });
    $('#Task').position({
      my: "center",
      at: "bottom",
      of: ".makeMeDraggable"
    });
  });//end click
  $('.makeMeDraggable').draggable().hide();

});//end ready
</script>


</head>
<body>
  <div class="wrapper">
    <div class="content">
        <div class="main">
        <h1>Draggable Task</h1>
        <a class = "button" id="create_block">Create Task</a>
        <div class="tasker">
          <div class="makeMeDraggable">
            <p id = Task>Task</p></div>
          </div>
        </div>
    </div>
  </div>
  </div>
</body>


</html>

Answer 1

我不完全确定你的目的是什么，但使用类而不是id的相对选民工作正常。你不能为同一个id分配多个div，因为只有一个div可以正常工作，而是使用类。

$('document').ready(function(){
  $("#create_block").click(function(){
    $("<div><p class='Task'>Task</div>")
      .appendTo('.tasker')
      .draggable().css({
        'width': '50px', //set width
        'height': '50px' //set height
      })
      .find(".Task")
      .position({
        my: "center",
        at: "bottom",
        of: ".makeMeDraggable"
      });
  });//end click
  $('.makeMeDraggable').draggable().hide();

});//end ready

.makeMeDraggable {
  position: absolute;
  top: 20;
  left: 0;
  width: 300px;
  height: 300px;
  background: blue;

}
.wrapper {
  margin-top: 50px;
  margin-bottom: 20px;
}
.Task {
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">
  <div class="content">
      <div class="main">
      <h1>Draggable Task</h1>
      <a class = "button" id="create_block">Create Task</a>
      <div class="tasker">
        <div class="makeMeDraggable">
          <p class="Task">Task</p></div>
        </div>
      </div>
  </div>
</div>
</div>

Answer 2

首先，您不应该使用生成具有相同ID的多个元素的代码。这总是会造成难以调试的错误。

其次，我相信您的代码可以简化。请参阅下面的代码段。

至于文字居中和自动宽度，只需将显示设为inline-block，不指定width或height并将text-align设为center应该做的伎俩：

$(window).on('load', function() {
  $("#create_block").click(function() {
    if ($('input[name="task"]').val().length) {
      let width = $('input[name="width"]').val() > 0 ? 
          'width:' + $('input[name="width"]').val() + 'px;':'', 
          height = $('input[name="height"]').val() > 0 ? 
          'height:' + $('input[name="height"]').val() + 'px;':'';
      $('.tasker').append($("<div />", {
        class: 'makeMeDraggable',
        html: '<p>' + $('input[name="task"]').val() + '</p>',
        style: width + height
      }).draggable());
      $('input').val('');
    }
  });
})

.makeMeDraggable {
  position: absolute !important;
  background: blue;
  text-align: center;
  display: inline-flex;
  padding: 0 15px;
  color: white;
  align-items: center;
  justify-content: center;
}

.tasker {
  padding-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  margin-top: 50px;
  margin-bottom: 20px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<div class="wrapper">
  <div class="content">
    <div class="main">
      <h1>Draggable Task</h1>
      <input name="task" type="text" placeholder="task name; cannot be empty"/><br />
      <input name="width" type="number" placeholder="width; empty for auto"/><br />
      <input name="height" type="number" placeholder="height; empty for auto" /><br />
      <button id="create_block">Create Task</button>
      
      <div class="tasker"></div>
    </div>
  </div>
</div>

附注：将.makeMeDraggable的位置设置为absolute不会执行任何操作，因为.draggable()会将其设置为relative。如果您在规则上设置!important并尝试使用tasker将任务放在transform:translateX(-50%)内，那么每次您的任务宽度都会50%向左跳转开始拖动它们，这可能是不希望的。

但是，display:flex上的.tasker似乎可以用于此目的。（更新了具有弹性居中的片段）。

使用居中用户指定的文本动态创建div

2 个答案: