Question

我创建了拖动文字功能。当我在元素上应用文本对齐时，它无法正确拖动。我正在使用单选按钮（左，中，右）应用对齐

我无法在对齐之后或之前正确拖动元素。

 <head>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <style>
     #drg {
        width:300px;
        height:300px;
        border:2px solid blue;
     }
  </style>
  <script>
   $(function() {
    //left alignment
    $("input:radio[id=t1]").click(function(){
      $( "#draggable3" ).css('text-align','left');
    });

    //center alignment
    $("input:radio[id=t2]").click(function(){
      $( "#draggable3" ).css('text-align','center');
    });
    //right alignment
    $("input:radio[id=t3]").click(function(){ 
      $( "#draggable3" ).css('text-align','right');  
    });

    $( "#draggable3" ).draggable({
     cursor: 'move',        // sets the cursor apperance
     containment: '#drg',
     start: function( event, ui ) {
       $( 'input:radio[name=t1]' ).prop( "checked", false );
       $( "#draggable3" ).css('text-align','justify');
     }
    });
   });
  </script>
 </head>
 <body>
    left <input type="radio" name="t1" id="t1" />
    center<input type="radio" name="t1"id="t2"  />
    right<input type="radio" name="t1"id="t3"  />

    <div id="drg">
        <h5 id="draggable3" > test</h5> 
    </div>
 </body>

Answer 1

试试这个......

<div id="drg" style="height:200px;width:200px;border:solid 1px blue;">
            <h5 id="draggable3" style="position:absolute" > test</h5> </div>
<script>
    $(function () {
        var text = "left", pos=0;
        $("input:radio[id=t1]").click(function () {
            $("#draggable3").css('position', 'initial');
            $("#draggable3").css('text-align', 'left');
            text = "left";
            pos = 0;
        });

        // center aligment
        $("input:radio[id=t2]").click(function () {
            $("#draggable3").css('position', 'initial');
            $("#draggable3").css('text-align', 'center');
            text = "center";
            pos = 0;
        });
        //right alligment
        $("input:radio[id=t3]").click(function () {
            $("#draggable3").css('position', 'initial');
            $("#draggable3").css('text-align', 'right');
            text = "right";
            pos = 0;
        });
        $("#draggable3").mousedown(function (e) {
            if (text == "left" && pos == 0) {
                $("#draggable3").css('position', 'absolute');
                $("#draggable3").css('left', '0px');
                $("#draggable3").css('top', '0px');
            }
            if (text == "right" && pos == 0) {
                $("#draggable3").css('position', 'absolute');
                $("#draggable3").css('left', ($("#drg").width() - $(this).width()) + "px");
                $("#draggable3").css('top', '0px');
            }
            if (text == "center" && pos == 0) {
                $("#draggable3").css('position', 'absolute');
                $("#draggable3").css('left', ($("#drg").width() / 2 - $(this).width() / 2) + "px");
                $("#draggable3").css('top', '0px');
            }
        });
        $("#draggable3").draggable({
            cursor: 'move',        // sets the cursor apperance
            containment: '#drg',
            create: function (event, ui) {
            },
            beforeStart: function (event, ui) {
            },
            start: function (event, ui) {
                $('input:radio[name=t1]').prop("checked", false);
                //$("#draggable3").css('text-align', 'justify');
            },
            stop: function (event, ui) {
                $("#draggable3").css('text-align', text);
                pos = 1;
            }
        });
    });
</script>

像这样重写mousedown（）

        $("#draggable3").mousedown(function (e) {
            if (text == "left" && pos == 0) {
                $("#draggable3").css('position', 'absolute');
                $("#draggable3").css('left', '10px');
            }
            if (text == "right" && pos == 0) {
                $("#draggable3").css('position', 'absolute');
                $("#draggable3").css('left', ($("#drg").width() - $(this).width()+10) + "px");
            }
            if (text == "center" && pos == 0) {
                $("#draggable3").css('position', 'absolute');
                $("#draggable3").css('left', ($("#drg").width() / 2 - $(this).width() / 2+10) + "px");
            }
        });

一切顺利。希望它能起作用..

Answer 2

像这样重写mousedown（），解决一个小问题

$("#draggable3").mousedown(function (e) {

        if (text == "left" && pos == 0) {
            $("#draggable3").css('position', 'absolute');
            $("#draggable3").css('left', '10px');
            $("#draggable3").css('top', '5px');

        }
        if (text == "right" && pos == 0) {
            $("#draggable3").css('position', 'absolute');
            $("#draggable3").css('left', ($("#drg").width() - $(this).width()) + "px");
            $("#draggable3").css('top', $("#drg").position().top);
        }
        if (text == "center" && pos == 0) {
        alert(text);
            $("#draggable3").css('position', 'absolute');
            $("#draggable3").css('left', ($("#drg").width() / 2 - $(this).width() / 2) + "px");
            $("#draggable3").css('top',$("#drg").position().top);
        }
    });

在文本对齐元素之后或之前，无法在方形边框中正确拖动元素

2 个答案: