CODEWITHSUNDEEP
jquery
krb
krb

Reputation: 436

drag and drop using jquery ui sortable function need css to be changed

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>HTML</title>
        <meta name="description" content="" />
        <meta name="author" content="Sri Sahasra" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link rel="stylesheet" href="jquery-ui-1.10.4.custom.css" type="text/css" />
        <script src="jquery.js"></script>
        <script src="jquery_ui.js"></script>
    </head>

    <body>



</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>





    <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>

    </body>
</html>

In the above code what I need is when I am dragging the list items from one div to another div, the css property "border" has to be changed to "dashed border", I mean the list item which ever we move to another div that particular item border has to be changed. Can anybody please help me on this.

Upvotes: 0

Views: 2772

Answers (1)

theJooj
theJooj

Reputation: 146

You can use the start and stop functions that are part of the sortable api. On start, change the border to dashed. On stop, change the border back to solid.

$(function() {
$( "#sortable1, #sortable2" ).sortable({
  connectWith: ".connectedSortable",
    start: function(e,ui){
        ui.item.css('border-style', 'dashed');
    },
    stop: function(e,ui){
        ui.item.css('border-style', 'solid');
    }
}).disableSelection();

});

JSFiddle Example - http://jsfiddle.net/9YUxb/

I hope that helps.

To include border color you would return the css options as an object.

ui.item.css({
            'border-style': 'dashed',
            'border-color': '#ff0000'
        });

Upvotes: 3

Related Questions