Question

我想将带有id="drag"的div中的文字放到另一个id="dropdiv"的div中。 <p>标记中的文字正在被删除但不在droppable div的中心或左侧。

我希望每当我在div上删除文本时，它会自动调整到div的中心或左边。请告诉我怎么做。这是我的代码：

$(".draggable2").draggable({
    revert: "invalid",
    stop: function () {
        $(this).draggable('option', 'revert', 'invalid');
    }
});

$(".draggable2").droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function (event, ui) {        
        ui.draggable.draggable('option', 'revert', true);
        ui.draggable.position({of: $(this),my: 'left top',at: 'left top'});
    }
});
$(".droppable").droppable({
    drop: function (event, ui) {

    }
});

<div style="text-align:left; border:1px solid;"class="droppable" id="dropdiv"></div>
<div id="drag">
    <p class="draggable2">TEXT</p>
</div>

Answer 1

你需要这样吗？我改变脚本如下，它可能会帮助你......

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
	
	
    $( ".draggable2" ).draggable();
    $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        $( this ).html($( ".draggable2" ).draggable());
        $( this ).find("p").removeAttr("style");
        $( this ).css("height","auto");
      }
    });

});

</script>
</head>
<body>
<div style="text-align:left; border:1px solid;height:20px;"class="droppable" id="dropdiv">
</div> 

<div id="drag" ><p class="draggable2 " >Text</p><div>

</body>
</html>

＆＃13;

如何在droppable div left-align中自动调整可拖动文本

1 个答案: